0
0
Lập trình
Admin Team
Admin Teamtechmely

Khám Phá JavaScript Nâng Cao - Kỳ 17: Hiểu Về Tham Số Mặc Định, Khái Niệm This, Và Quản Lý Biến

Đăng vào 1 tháng trước

• 4 phút đọc

Một Chương Trình Hài Hước Về JavaScript

"Trên đời chỉ có thứ nhiều người chửi và thứ không ai thèm dùng."
Háo hức khám phá JavaScript trong bài viết hôm nay, tôi sẽ cùng bạn phân tích những điểm thú vị và những thách thức của ngôn ngữ lập trình này. Hãy cùng tôi đi vào những ví dụ thực tiễn để nâng cao kiến thức JavaScript của bạn nhé.

Chương trình này dự kiến sẽ kéo dài với nhiều kỳ mới và tôi sẽ cố gắng mở rộng nội dung để mọi người có cái nhìn tổng quát hơn về JavaScript. Trong mỗi kỳ sẽ bổ sung nhiều lý thuyết, xen kẽ với kiến thức đã đề cập trong các bài viết trước.

Chúng ta hãy cùng bắt đầu nào! 🚀


1. Tham Số Mặc Định Trong Hàm

Xét đoạn mã sau:

javascript Copy
function sayHi(name) {
  return `Hi there, ${name}`
}

console.log(sayHi())

Câu hỏi: Output của đoạn mã trên là gì?

  • A: Hi there,
  • B: Hi there, undefined
  • C: Hi there, null
  • D: ReferenceError

Đáp án: B

Phân Tích

Khi gọi hàm sayHi() mà không truyền tham số name, JavaScript tự động gán undefined cho name. Do đó, kết quả là Hi there, undefined.
Để tránh điều này, bạn có thể sử dụng giá trị mặc định cho tham số:

javascript Copy
function sayHi(name = "Guest") {
  return `Hi there, ${name}`
}
console.log(sayHi()) // "Hi there, Guest"

2. Khái Niệm this Trong Các Phương Thức

Xem xét đoạn mã sau:

javascript Copy
var status = "😎"

setTimeout(() => {
  const status = "😍"

  const data = {
    status: "🥑",
    getStatus() {
      return this.status
    }
  }

  console.log(data.getStatus())
  console.log(data.getStatus.call(this))
}, 0)

Câu hỏi: Output của đoạn mã trên là gì?

  • A: "🥑" và "😍"
  • B: "🥑" và "😎"
  • C: "😍" và "😎"
  • D: "😎" và "😎"

Đáp án: B

Phân Tích

Trong phương thức getStatus, this sẽ trỏ đến đối tượng data. Khi gọi data.getStatus(), kết quả là "🥑". Còn khi gọi data.getStatus.call(this), this trỏ đến đối tượng của hàm chứa (global context), mà trong đó giá trị status là "😎".


3. Tham Chiếu và Gán Giá Trị

Xem mã này:

javascript Copy
const person = {
  name: "Lydia",
  age: 21
}

let city = person.city
city = "Amsterdam"

console.log(person)

Câu hỏi: Output của đoạn mã trên là gì?

  • A: { name: "Lydia", age: 21 }
  • B: { name: "Lydia", age: 21, city: "Amsterdam" }
  • C: { name: "Lydia", age: 21, city: undefined }
  • D: "Amsterdam"

Đáp án: A

Phân Tích

Khi cố gắng truy cập person.city, sẽ trả về undefined vì thuộc tính này không tồn tại trong đối tượng. Việc gán "Amsterdam" cho biến city không thay đổi person.


4. Block Scope và Biến

Đoạn mã sau:

javascript Copy
function checkAge(age) {
  if (age < 18) {
    const message = "Sorry, you're too young."
  } else {
    const message = "Yay! You're old enough!"
  }

  return message
}

console.log(checkAge(21))

Câu hỏi: Output của đoạn mã trên là gì?

  • A: "Sorry, you're too young."
  • B: "Yay! You're old enough!"
  • C: ReferenceError
  • D: undefined

Đáp án: C

Phân Tích

message được khai báo trong các block ifelse, nên ngoài các block này không thể truy cập được. Gọi return message sẽ phát sinh một ReferenceErrormessage không tồn tại trong phạm vi hàm.


5. Promises và Fetch API

Với đoạn mã dưới:

javascript Copy
fetch('https://www.website.com/api/user/1')
  .then(res => res.json())
  .then(res => console.log(res))

Câu hỏi: Những thông tin nào được ghi ra?

  • A: Kết quả của phương thức fetch.
  • B: Kết quả của lần gọi thứ hai đến fetch.
  • C: Kết quả của callback trong .then() trước đó.
  • D: Luôn là undefined.

Đáp án: C

Phân Tích

Kết quả được ghi ra là dữ liệu JSON đã được parse từ response của API do hàm console.log(res) trong then cuối cùng.


Kết Luận

Trong bài viết này, chúng ta đã xem xét năm khía cạnh quan trọng của JavaScript, từ tham số mặc định, khái niệm this, đến quản lý biến và cách sử dụng Fetch API. Những kiến thức này rất cần thiết để viết mã JavaScript hiệu quả và tránh lỗi không mong muốn.
Hy vọng bạn tìm thấy thông tin hữu ích trong bài viết này. Hẹn gặp lại ở những kỳ tiếp theo của "JavaScript Nâng Cao"!
Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại bình luận dưới đây nhé. Cảm ơn bạn rất nhiều! 🤗
source: viblo

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào