Что такое генераторная функция (function*) и как работает yield?

Генераторная функция в JavaScript представляет собой особый вид функции, который позволяет выполнять её выполнение поэтапно, приостанавливая и возобновляя выполнение в определённых точках. Генераторные функции определяются с использованием ключевого слова function*, а для управления их выполнением используется оператор yield.

Ключевые аспекты генераторных функций

1. Определение:

   • Генераторные функции создаются с помощью function*. Например:

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

2. Использование yield:

   • Ключевое слово yield используется для приостановки выполнения функции и возвращает значение. При следующем вызове генератора выполнение продолжается с того места, где оно было приостановлено.
   • Пример:

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

3. Возврат значения:

   • Когда генератор завершает выполнение, он возвращает объект с полем done, которое указывает, закончено ли выполнение, и value, которое содержит возвращаемое значение. Если генератор завершён, value будет undefined.

4. Итераторы:

   • Генераторные функции автоматически создают итератор. Итераторы — это объекты, которые реализуют метод next(), возвращающий следующий элемент последовательности. Это позволяет использовать генераторы в контексте for...of:

     for (let value of myGenerator()) {
         console.log(value); // 1, 2, 3
     }
     

Подробности о yield

• yield может использоваться для возвращения значений, и его можно вызывать многократно. При каждом вызове next() выполнение продолжится с последней точки, где было вызвано yield.
• Вы можете передать значение обратно в генератор через метод next(value):

  function* generator() {
      const value1 = yield 1;
      console.log(value1); // Выведет 'Hello'
      yield 2;
  }
  
  const gen = generator();
  console.log(gen.next()); // { value: 1, done: false }
  console.log(gen.next('Hello')); // { value: 2, done: false }
  

Практические советы

• Использование генераторов:

  • Генераторные функции полезны для работы с асинхронными операциями, например, с потоками данных или для создания последовательностей чисел.
  • Их можно использовать для создания "паузы" в выполнении функции, что может быть полезно в анимациях или при выполнении длительных операций.

• Распространённые ошибки:

  • Неправильное использование yield, например, попытка вызвать next() без предварительного вызова генератора, приведёт к ошибке.
  • Запутанность в возвращаемых значениях. Не забудьте проверять свойство done, чтобы избежать ошибок при работе с завершёнными генераторами.

Заключение

Генераторные функции и оператор yield предоставляют мощный инструмент для управления потоками выполнения в JavaScript. Они позволяют писать более чистый и понятный код, особенно при работе с асинхронными задачами и итерациями. Понимание их работы и особенностей является важным навыком для разработчиков, работающих на уровне Senior.