Iterators and Generators in JavaScript

Understanding the Iterator Protocol

An iterator is any object which implements the Iterator protocol by having a next() method that returns an object with two properties:

• value: The next value in the iteration sequence
• done: true if the last value in the sequence has already been consumed

Once created, an iterator object can be iterated explicitly by repeatedly calling next(). Iterating over an iterator is said to consume the iterator, because it is generally only possible to do once. After a terminating value has been yielded, additional calls to next() should continue to return {done: true}.

Creating Custom Iterators

While it is easy to imagine that all iterators could be expressed as arrays, this is not true. Arrays must be allocated in their entirety, but iterators are consumed only as necessary. Because of this, iterators can express sequences of unlimited size, such as the range of integers between 0 and Infinity.

An iterator is any object which implements the Iterator protocol by having a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols" target="_blank">next() method that returns an object with two properties</a>: value (the next value in the iteration sequence) and done (true if the last value has been consumed).

Generator Functions: Simplified Iterator Creation

While custom iterators are a useful tool, their creation requires careful programming due to the need to explicitly maintain their internal state. Generator functions provide a powerful alternative: they allow you to define an iterative algorithm by writing a single function whose execution is not continuous.

How Generators Work

Generator functions are written using the function* syntax. When called, generator functions do not initially execute their code. Instead, they return a special type of iterator, called a Generator. When a value is consumed by calling the generator's next() method, the Generator function executes until it encounters the yield keyword.

Generator functions allow you to define an iterative algorithm by writing a single function whose execution is not continuous. When you call a generator, it returns a generator object which conforms to both the iterator and iterable protocols. Each Generator may only be iterated once--if you need to iterate multiple times, you must call the generator function again to get a new generator.

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators" target="_blank">Generator functions provide a powerful alternative for creating iterators</a>, allowing developers to write cleaner, more maintainable code with implicit state management. When building /services/web-development/ solutions that require efficient data processing, generators offer significant advantages over traditional array-based approaches.

The Iterable Protocol

An object is iterable if it defines its iteration behavior, such as what values are looped over in a for...of construct. Some built-in types, such as Array or Map, have a default iteration behavior, while other types (such as Object) do not.

Implementing Symbol.iterator

In order to be iterable, an object must implement the [Symbol.iterator]() method. This means that the object (or one of the objects up its prototype chain) must have a property with a Symbol.iterator key.

An object is iterable if it defines its iteration behavior--what values are looped over in a for...of construct. Some built-in types like Array and Map have default iteration behavior, while others like Object do not. An object must implement the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols" target="_blank">Symbol.iterator method</a> to be iterable.

It may be possible to iterate over an iterable more than once, or only once. It is up to the programmer to know which is the case. Iterables which can iterate only once (such as Generators) customarily return this from their [Symbol.iterator]() method, whereas iterables which can be iterated many times must return a new iterator on each invocation of [Symbol.iterator]() (like arrays).

Built-in Iterables

JavaScript provides several built-in iterables that you'll use frequently:

All of these types have a Symbol.iterator method on their prototype objects, making them directly usable with for...of loops and other iterable-consuming syntax.

Built-in iterables in JavaScript include <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators" target="_blank">String (iterates over Unicode code points), Array (iterates over elements in insertion order), TypedArray (iterates over typed array elements), Map (iterates over key-value pairs in insertion order), and Set (iterates over set elements in insertion order)</a>. The arguments object and NodeList objects are also iterable.

Syntaxes Expecting Iterables

JavaScript provides several syntax constructs that work with iterables:

for...of Loops

Creates a loop iterating over iterable objects:

for (const value of ['a', 'b', 'c']) {
 console.log(value); // 'a', 'b', 'c'
}

Spread Syntax

Expands iterables into individual elements:

[...'abc']; // ['a', 'b', 'c']
const set = new Set([1, 2, 3]);
[...set]; // [1, 2, 3]

Destructuring Assignment

Works with any iterable:

const [a, b, c] = new Set(['a', 'b', 'c']);
// a = 'a', b = 'b', c = 'c'

yield* Delegation

Delegates to another iterable:

function* gen() {
 yield* ['a', 'b', 'c'];
}

gen().next(); // { value: 'a', done: false }

The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" target="_blank">for...of statement creates a loop iterating over iterable objects</a>, including built-in String, Array, TypedArray, Map, Set, user-defined iterables, and objects with [Symbol.iterator] defined.

Advanced Generator Features

Passing Values to next()

The next() method also accepts a value, which can be used to modify the internal state of the generator. A value passed to next() will be received by yield:

function* counter() {
 const step = yield 0;
 for (let i = 1; i <= step; i++) {
 yield i;
 }
}

const gen = counter();
gen.next(); // { value: 0, done: false }
gen.next(5); // step = 5, { value: 1, done: false }
gen.next(); // { value: 2, done: false }

yield* for Delegation

The yield* expression delegates to another generator or iterable:

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

function* outer() {
 yield 'a';
 yield* inner();
 yield 'b';
}

[...outer()]; // ['a', 1, 2, 'b']

Return and Throw Methods

Generators also have return() and throw() methods for terminating iteration or injecting errors into the generator function. These patterns are particularly valuable when building robust /services/web-development/ applications that need to handle errors gracefully in data processing pipelines.

ES2025 Iterator Helpers

JavaScript 2025 (ECMAScript 2025) officially approved a set of new Iterator Helper methods that significantly enhance the functionality of iterators. These built-in methods allow you to chain operations on iterators without converting them to arrays first, maintaining lazy evaluation for better performance.

Available Iterator Helpers

These methods allow you to chain operations on iterators without converting them to arrays first, maintaining lazy evaluation for better performance.

<a href="https://www.w3schools.com/js/js_iterators.asp" target="_blank">ES2025 Iterator Helper methods</a> include .map(fn), .filter(fn), .take(n), .drop(n), .reduce(fn, initial), .toArray(), .flatMap(fn), .every(fn), .some(fn), .find(fn), and .forEach(fn). For teams exploring advanced JavaScript patterns, these helpers complement our /services/ai-automation/ capabilities when building intelligent data processing systems that need to handle streaming data efficiently.

Practical Use Cases

Infinite Sequences

function* naturalNumbers() {
 let n = 1;
 while (true) {
 yield n++;
 }
}

const numbers = naturalNumbers();
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
// Can continue indefinitely!

Data Processing Pipelines

function* processData(data) {
 for (const item of data) {
 const transformed = item.trim().toUpperCase();
 if (transformed.length > 0) {
 yield transformed;
 }
 }
}

const results = [...processData([' a ', 'bb', '', 'ccc'])]
// ['A', 'BB', 'CCC']

State Machines

function* trafficLight() {
 while (true) {
 yield 'green';
 yield 'yellow';
 yield 'red';
 }
}

const light = trafficLight();
light.next().value; // 'green'
light.next().value; // 'yellow'
light.next().value; // 'red'

Async Data Streams

async function* fetchMessages(url) {
 let page = 1;
 
 while (true) {
 const response = await fetch(`${url}?page=${page}`);
 const messages = await response.json();
 
 if (messages.length === 0) break;
 
 for (const message of messages) {
 yield message;
 }
 
 page++;
 }
}

// Usage
for await (const message of fetchMessages('/api/messages')) {
 console.log(message);
}

Our /resources/guides/web-development/async-js/ guide covers async iteration patterns in more detail, including how to combine generators with async/await for powerful streaming data solutions.

When to Use Generators

• Processing large or infinite data streams
• Implementing state machines
• Creating custom iteration logic
• Building data processing pipelines
• Lazy evaluation of expensive computations
• Implementing async iteration patterns

When to Use Arrays

• Need random access to elements
• Multiple passes over data
• Data size is known and manageable
• Need array methods like sort, splice