Khám Phá JavaScript Nâng Cao - Kỳ 15: Tìm Hiểu Về Generator Functions, String.raw, Async/Await, và Các Phương Thức Array

Một Câu Nói Vui Về JavaScript

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. JavaScript là một ví dụ điển hình. Nó có nhiều điểm thú vị nhưng cũng khiến chúng ta phải đau đầu. Lý thuyết có thể dễ hiểu, nhưng khi thực hành thì lại là cả một vấn đề. Vậy nên, trong bài viết này, mình sẽ cùng các bạn đi sâu vào từng ví dụ cụ thể, phân tích và mổ xẻ chúng để hiểu rõ hơn về JavaScript nhé.

Chương trình này có thể sẽ khá dài và không biết sẽ có bao nhiêu kỳ. Tuy nhiên, để hỗ trợ các bạn nào chưa đọc các bài trước, mình sẽ giải thích lại toàn bộ kiến thức trong series này. Các lý thuyết mình sẽ giải thích lại nhiều lần (tùy hứng) để giúp các bạn nắm rõ hơn.

Ok, bắt đầu bài thôi nào... GÉT GÔ 🚀

Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hãy bình luận dưới phần comment. Hoặc chỉ cần để lại một comment 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. Tìm Hiểu Về Generator Functions và Từ Khóa yield

Hãy cùng xem đoạn code sau:

function* startGame() {
  const answer = yield "Do you love JavaScript?";
  if (answer !== "Yes") {
    return "Oh wow... Guess we're gone here";
  }
  return "JavaScript loves you back ❤️";
}

const game = startGame();
console.log(/* 1 */); // Do you love JavaScript?
console.log(/* 2 */); // JavaScript loves you back ❤️

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

• A: game.next("Yes").value và game.next().value
• B: game.next.value("Yes") và game.next.value()
• C: game.next().value và game.next("Yes").value
• D: game.next.value() và game.next.value("Yes")

Đáp án: C

Phân Tích Đoạn Code

1. Khởi tạo generator: const game = startGame();.
2. Gọi game.next().value để in ra lúc đầu, truy xuất yield. Kết quả là "Do you love JavaScript?".
3. Gọi game.next("Yes").value sau đó sẽ in ra "JavaScript loves you back ❤️".

Generator Functions

Generator Functions là loại hàm đặc biệt trong JavaScript cho phép tạm dừng và tiếp tục thực thi hàm tại nhiều điểm khác nhau, nhờ vào từ khóa yield. Từ khóa này giúp tạm dừng thực thi hàm và trả về giá trị được chỉ định.

2. Cách Sử Dụng String.raw và Chuỗi Template Literals

Xem đoạn code sau:

console.log(String.raw`Hello\nworld`);

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

• A: Hello world!
• B: Hello
world
• C: Hello\nworld
• D: Hello\n
world

Đáp án: C

Giải Thích

String.raw là một phương thức trong JavaScript dùng để làm việc với template literals mà không giải quyết các ký tự escape. Do đó, console.log(String.rawHello\nworld) sẽ trả về "Hello\nworld" thay vì chuyển đổi \n thành xuống dòng.

3. Hiểu Về Async/Await và Promises

Xem đoạn code dưới:

async function getData() {
  return await Promise.resolve("I made it!");
}

const data = getData();
console.log(data);

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

• A: "I made it!"
• B: Promise {<resolved>: "I made it!"}
• C: Promise {<pending>}
• D: undefined

Đáp án: B

Phân Tích

Hàm getData() luôn trả về một Promise. Khi gọi console.log(data);, kết quả sẽ là một Promise chứ không phải giá trị đã resolve, vì chúng ta không đợi Promise hoàn thành.

4. Phương Thức Array và Giá Trị Trả Về

function addToList(item, list) {
  return list.push(item);
}

const result = addToList("apple", ["banana"]);
console.log(result);

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

• A: ['apple', 'banana']
• B: 2
• C: true
• D: undefined

Đáp án: B

Giải Thích

Phương thức push() thêm một phần tử vào cuối mảng và trả về chiều dài mới của mảng. Do đó, khi thêm "apple" vào mảng ban đầu, chiều dài mới sẽ là 2, và console.log(result) sẽ in ra 2.

5. Immutability và Object.freeze()

const box = { x: 10, y: 20 };

Object.freeze(box);

const shape = box;
shape.x = 100;

console.log(shape);

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

• A: { x: 100, y: 20 }
• B: { x: 10, y: 20 }
• C: { x: 100 }
• D: ReferenceError

Đáp án: B

Giải Thích

Khi đối tượng box bị đóng băng bằng Object.freeze(), nó không thể thay đổi thuộc tính. Kết quả in ra vẫn là { x: 10, y: 20 } vì shape.x = 100; không có tác dụng.

Kết Luận

Bài viết đã cùng các bạn tìm hiểu về:

1. Generator Functions và cách sử dụng từ khóa yield.
2. Cách sử dụng String.raw với template literals.
3. Async/Await cùng Promises.
4. Cách hoạt động của phương thức push() trong mảng Array.
5. Tính bất biến (immutability) với Object.freeze().

Hy vọng các bạn đã tìm thấy thông tin bổ ích trong bài viết này và có thể áp dụng vào chương trình JavaScript của mình. Hãy tiếp tục khám phá và rèn luyện kỹ năng lập trình của bạn nhé! Nếu có bất kỳ câu hỏi nào, hãy để lại comment dưới bài viết. Mình sẽ cố gắng phản hồi sớm nhất có thể! 👋
source: viblo