Generators in JavaScript are a powerful feature introduced in ECMAScript 6 (ES6) that allow you to define iterative algorithms by pausing and resuming execution at defined points. They provide a flexible way to control iteration and asynchronous operations.
How Generators Work
Generators are defined using function* syntax (note the asterisk). They use the yield keyword to pause execution and return values sequentially. When called, a generator function returns an iterator object that can be used to control the iteration.
Let's explore some practical examples to understand how generators are used:
Example 1: Fibonacci Sequence Generator
function* fibonacciGenerator() { let prev = 0; let curr = 1; yield prev; yield curr; while (true) { let next = prev + curr; yield next; prev = curr; curr = next; } } // Usage const fibonacciSequence = fibonacciGenerator(); for (let i = 0; i < 10; i++) { console.log(fibonacciSequence.next().value); // Outputs: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 } In this example, fibonacciGenerator generates an infinite sequence of Fibonacci numbers, pausing after each yield statement until next() is called again.
Example 2: Inorder Traversal of a Binary Tree
class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } } function* inorderTraversal(node) { if (node !== null) { yield* inorderTraversal(node.left); // Traverse left subtree yield node.value; // Yield current node's value yield* inorderTraversal(node.right); // Traverse right subtree } } // Usage const rootNode = new Node(10); rootNode.left = new Node(5); rootNode.right = new Node(15); // (Set up the rest of the tree as in the example) const iterator = inorderTraversal(rootNode); const result = []; for (let value of iterator) { result.push(value); } console.log(result); // Outputs: [3, 5, 7, 10, 15, 18] This generator function performs an inorder traversal of a binary tree, yielding values in the correct order.
Example 3: Custom Iterator Using Generators
class Range { constructor(start, end) { this.start = start; this.end = end; } *[Symbol.iterator]() { for (let i = this.start; i <= this.end; i++) { yield i; } } } // Usage const range = new Range(1, 5); for (let num of range) { console.log(num); // Outputs: 1, 2, 3, 4, 5 } Here, the Range class uses a generator to create an iterable range of numbers from start to end.
Example 4: Asynchronous Control Flow
function fetchDataFromAPI(endpoint) { return new Promise((resolve, reject) => { setTimeout(() => { const data = { endpoint, results: [1, 2, 3, 4, 5] }; resolve(data); }, Math.random() * 1000); }); } function* fetchAndProcessData() { try { const data1 = yield fetchDataFromAPI('/api/data1'); console.log('Processed data1:', data1); const data2 = yield fetchDataFromAPI('/api/data2'); console.log('Processed data2:', data2); const data3 = yield fetchDataFromAPI('/api/data3'); console.log('Processed data3:', data3); console.log('All data processed!'); } catch (error) { console.error('Error:', error); } } function runGenerator(generator) { const iterator = generator(); function iterate(iteration) { if (iteration.done) { return iteration.value; } const promise = iteration.value; return promise.then((value) => iterate(iterator.next(value))) .catch((error) => iterator.throw(error)); } return iterate(iterator.next()); } // Usage runGenerator(fetchAndProcessData); This example demonstrates using a generator to manage asynchronous operations sequentially, yielding promises and processing their results.
Conclusion
Generators offer a flexible way to control iteration and manage asynchronous flows in JavaScript. By pausing execution with yield, they allow complex tasks to be handled in a more readable and sequential manner. Understanding generators enhances your ability to write efficient and expressive JavaScript code.
Top comments (0)