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

JavaScript Nâng Cao - Kỳ 25: Giải Thích Về Setter, Getter, Toán Tử Phủ Định, Currying, Async Generator Functions và Destructuring

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

• 4 phút đọc

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 Copy
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ề undefinedlanguage 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 Copy
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 Copy
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 Copy
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 Copy
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 Copy
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

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