JS Adventskalender

Generators – Taking Iteration to the Next Level

With the introduction of ES6 (ECMAScript 2015), JavaScript received a number of powerful features, including Generator Functions. Generators offer a new way to write functions that can pause execution and resume later. They open up possibilities for complex iteration patterns, asynchronous programming, and more. In this article, we will explain the basics of Generators and show how they can revolutionize the way you program.

What are Generator Functions?

A Generator Function is a special type of function that can be paused and resumed multiple times during its execution. It is declared with the function* keyword and uses the yield keyword to produce values.

Characteristics of Generators:

Iterable and Iterator: Generators implement both the Iterable and Iterator protocols.
Pausable Execution: They can pause execution at certain points (yield) and resume later.
Two-way Communication: Data can be both sent to and received from the generator function.

Syntax of a Generator Function

Declaration of a Generator Function:

function* generatorName() {
  // Generator function body
}

Example:

function* simpleGenerator() {
  console.log('Start');
  yield 1;
  console.log('Intermediate');
  yield 2;
  console.log('End');
}

Using Generator Functions

Creating and Using a Generator:

const gen = simpleGenerator();

console.log(gen.next()); // { value: 1, done: false }
// Output: Start

console.log(gen.next()); // { value: 2, done: false }
// Output: Intermediate

console.log(gen.next()); // { value: undefined, done: true }
// Output: End

Each call to next() resumes the generator until the next yield statement.

Practical Examples

1. Infinite Sequences:

function* infiniteNumbers() {
  let num = 0;
  while (true) {
    yield num++;
  }
}

const numbers = infiniteNumbers();
console.log(numbers.next().value); // 0
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2

2. Iterating Over Custom Data Structures:

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for (let num of range(1, 5)) {
  console.log(num);
}
// Output: 1, 2, 3, 4, 5

3. Asynchronous Control Flow:

function* fetchData() {
  const data1 = yield fetch('/api/data1');
  console.log(data1);
  const data2 = yield fetch('/api/data2');
  console.log(data2);
}

Passing Values to Generators

function* echo() {
  while (true) {
    const value = yield;
    console.log('Received:', value);
  }
}

const gen = echo();
gen.next(); // Start generator
gen.next('Hello'); // Output: Received: Hello
gen.next('World'); // Output: Received: World

Conclusion

Generators are a powerful feature that brings new possibilities to JavaScript. They enable elegant solutions for iteration, asynchronous programming, and complex control flows. While they may seem complex at first, understanding Generators opens up new ways to write cleaner and more maintainable code.

Try out Generators in your next project and discover how they can enhance your programming capabilities!

Door 12