JavaScript Nâng Cao - Kỳ 24: Hiểu Biết Sâu Sắc Về Spread Operator, Tham Chiếu, Và Các Tính Năng Khác Của JavaScript

Giới thiệu về JavaScript

JavaScript không chỉ là một ngôn ngữ lập trình phổ biến mà còn là một nguồn cảm hứng cho nhiều lập trình viên. Có một câu nói vui rằng: Trên đời chỉ có thứ nhiều người chửi và thứ không ai thèm dùng. Điều này đúng với JavaScript - dù được yêu thích nhưng nó cũng có nhiều khía cạnh khó nhằn. Trong bài viết này, chúng ta sẽ cùng khám phá các khía cạnh thú vị và những thách thức trong việc học JavaScript qua các ví dụ cụ thể.

Series này có thể sẽ khá dài, và mình không biết sẽ có bao nhiêu Kỳ. Tuy nhiên, để phục vụ cho các bạn không đọc các bài trước đó của mình, mình sẽ giải thích lại toàn bộ và đặc biệt là nhấn mạnh các lý thuyết quan trọng nhiều lần (tùy hứng) để các bạn dễ dàng nắm bắt hơn.

Bắt đầu nào! GÉT GÔ 🚀

Nếu có bất kỳ câu hỏi nào, đừng ngần ngại bình luận ở phần comment nhé. Hoặc chỉ cần để lại một bình luận chào mình là đã 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. Hiểu Về Tham Chiếu và Spread Operator

Bạn thử hỏi: Output của đoạn code bên dưới là gì?

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

const changeAge = (x = { ...person }) => x.age += 1;
const changeAgeAndName = (x = { ...person }) => {
  x.age += 1;
  x.name = "Sarah";
};

changeAge(person);
changeAgeAndName();

console.log(person);

• A: {name: "Sarah", age: 22}
• B: {name: "Sarah", age: 23}
• C: {name: "Lydia", age: 22}
• D: {name: "Lydia", age: 23}

Đáp án: C

1.1. Phân Tích Spread Operator và Copying Object

Spread Operator (...) giúp sao chép tất cả thuộc tính của một object sang một object mới. Trong trường hợp này, cả hai hàm changeAge và changeAgeAndName đều có tham số mặc định là một bản sao của object person.

1. Khi gọi changeAge(person), object person gốc bị thay đổi, age trở thành 22.
2. Khi gọi changeAgeAndName(), hàm sử dụng bản sao của person, không ảnh hưởng đến bản gốc.
3. Log person cho thấy nó vẫn giữ nguyên giá trị { name: "Lydia", age: 22 }.

1.2. Lưu Ý Quan Trọng

Khi truyền một object vào hàm, chúng ta đang truyền tham chiếu của object đó. Nhưng với Spread Operator, chúng ta tạo ra một object mới. Việc hiểu rõ điều này là rất cần thiết khi làm việc với JavaScript.

2. Spread Operator và Tham Số Hàm

Phép toán nào sau đây trả về 6?

function sumValues(x, y, z) {
 return x + y + z;
}

• A: sumValues([...1, 2, 3])
• B: sumValues([...[1, 2, 3]])
• C: sumValues(...[1, 2, 3])
• D: sumValues([1, 2, 3])

Đáp án: C

2.1. Phân Tích Các Đáp Án

• A: Cú pháp không hợp lệ vì không thể dùng Spread Operator với số.
• B: Tạo ra một mảng duy nhất chứa mảng [1, 2, 3]. Không phải ba số riêng biệt.
• C: Đây là cú pháp đúng. Phép toán ... sẽ phát triển mảng thành các phần tử riêng lẻ và trả về 6.
• D: Chỉ truyền vào một mảng duy nhất.

2.2. Lợi Ích Thực Tiễn

Spread Operator rất hữu ích trong việc kết hợp và sao chép các mảng, và thường giúp code dễ hiểu hơn.

3. Toán Tử Gán Kết Hợp và Indexing Mảng

Output là gì?

let num = 1;
const list = ["🥳", "🤠", "🥰", "🤪"];

console.log(list[(num += 1)]);

• A: 🤠
• B: 🥰
• C: SyntaxError
• D: ReferenceError

Đáp án: B

4. Optional Chaining Trong JavaScript

Output là gì?

const person = {
 firstName: "Lydia",
 lastName: "Hallie",
 pet: {
  name: "Mara",
  breed: "Dutch Tulip Hound"
 },
 getFullName() {
  return `${this.firstName} ${this.lastName}`;
 }
};

console.log(person.pet?.name);
console.log(person.pet?.family?.name);
console.log(person.getFullName?.());
console.log(member.getLastName?.());

• A: undefinedundefinedundefinedundefined
• B: MaraundefinedLydia Hallieundefined
• C: MaranullLydia Hallienull
• D: nullReferenceErrornullReferenceError

Đáp án: B

4.1. Giải Thích Chi Tiết

• Optional Chaining (?.) cho phép truy cập thuộc tính mà không cần kiểm tra giá trị của các tham chiếu trung gian có tồn tại hay không, giúp code an toàn hơn.

5. Điều Kiện Với indexOf

Output là gì?

const groceries = ["banana", "apple", "peanuts"];

if (groceries.indexOf("banana")) {
 console.log("Chúng ta cần mua chuối!");
} else {
 console.log(`Chúng ta không cần mua chuối!`);
}

• A: Chúng ta cần mua chuối!
• B: Chúng ta không cần mua chuối!
• C: undefined
• D: 1

Đáp án: B

5.1. Phân Tích

• indexOf trả về 0, và 0 được coi là falsy, do đó khối code trong else được thực hiện.

Kết Luận

Qua các ví dụ này, chúng ta đã khám phá cách JavaScript xử lý objects, mảng, các toán tử, và Optional Chaining. Hiểu rõ những khía cạnh này sẽ giúp bạn trở thành lập trình viên JavaScript giỏi hơn và tránh được những lỗi thường gặp. Hy vọng với bài viết này, bạn đã có thêm những kiến thức bổ ích về JavaScript.

Hẹn gặp lại trong các kỳ tiếp theo của series "JavaScript Nâng Cao"!

Nếu có câu hỏi hoặc ý kiến, hãy để lại bình luận nhé. Cảm ơn các bạn đã theo dõi! 🤗
source: viblo