function* у JS

JavaScriptMiddle~1 хв читання

1. Що робить `function*`

function* створює функцію-генератор, яка при виклику не виконується одразу, а повертає об'єкт-генератор (ітератор).

Цей об'єкт дозволяє керувати виконанням функції вручну - за допомогою викликів .next(), .throw(), .return().

2. Синтаксис

javascript

function* назваФункції(параметри) {
  yield значення1;
  yield значення2;
  // ...
}

Зірочка (*) після слова function робить функцію генератором.
Ключове слово yield використовується всередині, щоб призупинити виконання і повернути проміжне значення.

3. Приклад - простий генератор

javascript

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = gen(); // ← функція не виконується одразу

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Перший виклик gen() повертає ітератор, а не результат.
Кожен .next() запускає виконання до наступного yield.
Після останнього yield функція завершується.

4. Як працює `yield`

yield - це "пауза" у функції-генераторі. Він:

повертає значення назовні (value);
призупиняє виконання функції;
чекає наступного виклику .next(), щоб продовжити.

javascript

function* greet() {
  console.log('Початок');
  yield 'Привіт';
  console.log('Продовження');
  yield 'Як справи?';
}

const it = greet();
console.log(it.next().value); // "Привіт"
console.log(it.next().value); // "Як справи?"
console.log(it.next());       // done: true

Між yield виконання реально зупиняється, що неможливо із звичайними функціями.

5. Генератори = ітератори

Об'єкт, який повертає function*, реалізує протокол ітераторів:

javascript

function* gen() {
  yield 1;
  yield 2;
}

for (const n of gen()) {
  console.log(n);
}

Вивід:

javascript

1
2

6. Асинхронні генератори (ES2018)

Якщо додати async, можна використовувати await всередині генератора:

javascript

async function* fetchChunks() {
  yield await Promise.resolve('Частина 1');
  yield await Promise.resolve('Частина 2');
}

for await (const chunk of fetchChunks()) {
  console.log(chunk);
}

Асинхронні генератори повертають асинхронний ітератор, і перебираються через for await...of.

7. Ключові відмінності від звичайних функцій

Особливість	`function`	`function*`
Повертає	результат (`value`)	ітератор (generator object)
Можна призупиняти виконання	Ні	Так, через `yield`
Виконується одразу	Так	Ні, тільки при `.next()`
Використовується для	звичайних операцій	лінивих обчислень, ітераторів, потоків
Можна приймати значення назад	Ні	Так, через `next(value)`

8. Приклад передачі значення назад у генератор

javascript

function* conversation() {
  const name = yield 'Як тебе звати?';
  yield `Привіт, ${name}!`;
}

const chat = conversation();

console.log(chat.next().value);      // "Як тебе звати?"
console.log(chat.next('Tim').value); // "Привіт, Tim!"

Перший next() запускає генератор. Другий передає 'Tim' назад - це значення потрапляє в const name.

ПІДСУМОК

Властивість	Опис
`function*`	Оголошує функцію-генератор
Що повертає	Ітератор (об'єкт із методами `.next()`, `.throw()`, `.return()`)
Ключове слово всередині	`yield`
Особливість	Можна "покроково" виконувати і призупиняти код
Асинхронний варіант	`async function*`
Основне застосування	Ітератори, ліниві обчислення, потоки даних, складні асинхронні процеси

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.