Một Khía Cạnh Vui Vẻ Về JavaScript
Trên thế giới có hai thứ: thứ nhiều người chỉ trích và thứ không ai muốn sử dụng. JavaScript là một ví dụ điển hình, với những điểm thú vị cũng như những thách thức gây đau đầu cho lập trình viên. Lý thuyết thì đơn giản nhưng thực hành là một vấn đề lớn.
Hôm nay, chúng ta sẽ cùng nhau tìm hiểu sâu về nhiều khía cạnh nâng cao trong JavaScript thông qua một loạt các ví dụ minh họa cụ thể.
Loạt bài này có thể kéo dài không biết bao nhiêu kỳ, và mình dự định sẽ giải thích lại các lý thuyết mà mình đã chia sẻ trong các bài viết trước nhằm giúp các bạn hiểu rõ hơn về chúng.
Bắt đầu nhé, GÉT GÔ 🚀
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 bên dưới. Hoặc chỉ cần để lại một bình luận chào mình cũng đã giúp mình có thêm động lực hoàn thành series này. Cảm ơn các bạn rất nhiều. 🤗
1. Setter và Getter trong JavaScript
Hãy xem đoạn mã sau và cho mình biết output sẽ là gì:
javascript
const config = {
languages: [],
set language(lang) {
return this.languages.push(lang);
}
};
console.log(config.language);- A:
function language(lang) { this.languages.push(lang } - B:
0 - C:
[] - D:
undefined
Đáp án là: D
1.1. Phân Tích Vấn Đề
Trong đoạn code này, chúng ta định nghĩa một đối tượng config với thuộc tính languages, là một mảng rỗng và một setter language. Sau đó, chúng ta cố gắng in ra giá trị của config.language.
1.2. Giới Thiệu Về Setter
Setter là một phương thức đặc biệt được sử dụng để định nghĩa hành động khi một giá trị được gán cho thuộc tính. Trong trường hợp này, language là một setter.
1.3. Tại Sao Kết Quả Là undefined?
Khi không gán giá trị nào cho language, JavaScript chỉ đơn giản trả về undefined vì language là một setter mà không có getter.
1.4. Ví Dụ Minh Họa
Hãy xem một ví dụ với cả setter và getter:
javascript
const config = {
languages: [],
set language(lang) {
this.languages.push(lang);
},
get language() {
return this.languages[this.languages.length - 1];
}
};
config.language = "JavaScript";
console.log(config.language); // Output: "JavaScript"1.5. Tóm Tắt
Setter chỉ định nghĩa hành động gán, khi đọc giá trị từ một thuộc tính chỉ có setter mà không có getter, JavaScript sẽ trả về undefined.
2. Toán Tử Phủ Định và Kiểu Dữ Liệu
Chúng ta cùng xem đoạn mã sau:
javascript
const name = "Lydia Hallie";
console.log(!typeof name === "object");
console.log(!typeof name === "string");Đáp án: C (false false)
2.1. Phân Tích
typeof trả về kiểu của name, nhưng khi sử dụng toán tử phủ định !, chúng ta sẽ phải xem xét các loại giá trị trùng lặp.
2.2. Tóm Tắt
Khi so sánh giá trị boolean với một chuỗi của typeof, kết quả luôn là false bởi vì hai giá trị khác kiểu dữ liệu.
3. Currying Trong JavaScript
Xem đoạn mã sau:
javascript
const add = x => y => z => {
console.log(x, y, z);
return x + y + z;
};
add(4)(5)(6);Đáp án là: A (4 5 6)
3.1. Phân Tích Currying
Currying chuyển đổi hàm nhiều tham số thành chuỗi các hàm mỗi hàm chỉ một tham số.
3.2. Tóm Tắt
Khi gọi add(4)(5)(6), chúng ta sẽ nhận được output của từng giá trị.
4. Async Generator Functions
Hãy xem đoạn mã:
javascript
async function* range(start, end) {
for (let i = start; i <= end; i++) {
yield Promise.resolve(i);
}
}
(async () => {
const gen = range(1, 3);
for await (const item of gen) {
console.log(item);
}
})();Đáp án là: C (1, 2, 3)
4.1. Tóm Tắt
Async generator function kết hợp giữa async và generator cho phép tạo ra chuỗi giá trị bất đồng bộ.
5. Destructuring Trong JavaScript
Xem đoạn mã:
javascript
const myFunc = ({ x, y, z }) => {
console.log(x, y, z);
};
myFunc(1, 2, 3);5.1. Phân Tích
Hàm myFunc mong đợi một object, nhưng chúng ta đã truyền vào các giá trị số, khiến cho tất cả giá trị đều là undefined.
5.2. Cách Sửa Chữa
Cần truyền vào đối tượng có cấu trúc tương ứng với yêu cầu của hàm.
Kết Luận
Trong bài viết này, chúng ta đã cùng nhau khám phá một số khía cạnh nâng cao của JavaScript, từ setter và getter cho đến async generator functions. Những khái niệm này giúp chúng ta viết code hiệu quả và giải quyết các vấn đề phức tạp dễ dàng hơn. Hãy cùng thực hành để nâng cao kỹ năng lập trình JavaScript của bạn nhé!
Hy vọng bài viết đã mang đến cho bạn những hiểu biết bổ ích và hẹn gặp lại trong các kỳ tiếp theo của series "JavaScript Nâng Cao!"
source: viblo
