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
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
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
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
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
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 if và else, 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 ReferenceError vì message 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
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
