JavaScript yield là gì? Tìm hiểu thông qua ví dụ

Chào các bạn! Hôm nay chúng ta sẽ cùng tìm hiểu từ khóa yield trong JavaScript và làm thế nào để sử dụng nó trong generator functions nhé 😁.

Từ khóa yield trong JavaScript

Từ khóa yield trong JavaScript cho phép chúng ta tạm dừng và tiếp tục generator function (function *).

Chúng ta cùng xem qua cú pháp của từ khóa yield:

[variable_name] = yield [expression];

Trong đó:

1. expression chỉ định giá trị trả về từ generator thông qua iteration protocol. Nếu chúng ta bỏ qua expression, yield sẽ trả về undefined.
2. variable_name lưu trữ giá trị (nếu có) được truyền từ method next() của iterator object.

Để hiểu rõ hơn cách sử dụng yield chúng ta cùng xem qua một số ví dụ nhé.

Ví dụ

Ở ví dụ sau đây, chúng ta sẽ sử dụng từ khóa yield để trả về giá trị từ generator:

function* generate() { 
    yield 'homiedev.com';
    yield 'JavaScript';
    yield 'Front-end';
}

let gen = generate();

console.log(gen.next());

Kết quả:

{"value": "homiedev.com", "done": false}

Như các bạn có thể thấy giá trị ở sau yield được thêm vào thuộc tính value của object khi next() được gọi, cụ thể ở đây là yield 'homiedev.com';

Nếu không muốn return về giá trị nào, chúng ta có thể bỏ qua giá trị truyền vào yield như ví dụ sau:

function* nothing() {
    yield;
}

let result = nothing();
console.log(result.next()); 

Kết quả sẽ như sau:

{value: undefined, done: false}

Ngoài ra, nếu muốn lưu trữ giá trị được truyền từ method next() chúng ta có thể làm tương tự ví dụ sau:

function* displayName() {
    let name = yield;
    console.log(`Mình tên là ${name}`);
}

let result = displayName();

console.log(result.next()); 
console.log(result.next('Hà'));

Lần gọi result.next() đầu tiên sẽ trả về:

{value: undefined, done: false}

Lần gọi result.next() tiếp theo sẽ lần lượt thực hiện những hành động sau:

1. Đặt giá trị yield là 'Hà'.
2. Gán giá trị của name bởi giá trị của yield.
3. Hiện giá trị và return về object

Mình tên là Hà
{value: undefined, done: true}

🤔 Các bạn có thể thắc mắc sao không truyền giá trị ở ngay lệnh gọi next() đầu tiên? lí do là vì khi next() được gọi, generator sẽ thực thi cho đến khi gặp yield tiếp theo. Lần đầu tiên, khi chúng ta gọi next(), nó chạy cho đến khi gặp yield lần đầu, và generator sẽ tạm dừng ở đó, lúc này chương trình chưa thực hiện lệnh gán. Lần gọi tiếp theo, chúng ta gọi nó với một giá trị, generator tiếp tục chạy tại nơi tạm dừng và nó khởi tạo biến result thành giá trị 'Hà' mà mình gán ở trên.

Chúng ta có thể sử dụng yield trong array. Cùng theo dõi ví dụ tiếp theo nhé.

function* categories() {
    let arr = [yield, yield];
    console.log(arr);
}

let result = categories();

console.log(result.next());  
console.log(result.next('JavaScript')); 
console.log(result.next('ReactJS'));

Như mình đã lưu ý ở ví dụ trên, trong ví dụ này chúng ta lần lượt truyền giá trị ở lần gọi thứ 2, 3 và kết quả sẽ như sau:

{value: undefined, done: false}
{value: undefined, done: false}
['JavaScript', 'ReactJS']
{value: undefined, done: true}

Chúng ta có thể trả về từng phần tử trong mảng như sau:

function* elements() {
    yield '💻';
    yield [ 'homiedev.com', 'ReactJS', 'HTML/CSS' ];
    yield* [ 'homiedev', 'GatsbyJS', 'Học JavaScript cơ bản' ];
}

let result = elements();

console.log(result.next()); // {value: '💻', done: false}
console.log(result.next()); // {value: Array(3), done: false}
console.log(result.next()); // {value: 'homiedev', done: false}
console.log(result.next()); // {value: 'GatsbyJS', done: false}
console.log(result.next()); // {value: 'Học JavaScript cơ bản', done: false}

Ở ví dụ trên, yield * sẽ lặp qua iterable object và return về các giá trị của nó.

🎉 Như vậy là chúng ta đã cùng tìm hiểu về từ khóa yield trong JavaScript. Hi vọng bài viết giúp ích cho các bạn. Chúng ta có thể thảo luận về kiến thức này bên dưới phần bình luận nhé!

Cảm ơn các bạn đã đọc bài viết 😄.