JS Iterables

JavaScript Iterables: The Iteration Protocol and Generators

A JavaScript iterable is any object that implements a [Symbol.iterator]() method returning an iterator with a .next() function. Arrays, strings, Set, Map, and typed arrays are all built-in iterables that work with for...of and spread (...).

How [Symbol.iterator]() Works

When JavaScript runs for (const x of item) or [...item], it calls item[Symbol.iterator]() to get an iterator object. Repeatedly calling iterator.next() returns { value, done } objects until done becomes true.

Because generators (function*) build iterators automatically using yield, you rarely need to write manual { next() } state machines yourself.

Building a Custom Iterable Range

Notice how a generator inside [Symbol.iterator]() creates a lazy range that generates numbers on demand without allocating an entire array upfront.

const range = {
  start: 1,
  end: 4,
  *[Symbol.iterator]() {
    for (let current = this.start; current <= this.end; current++) {
      yield current;
    }
  },
};

console.log("Spread range:", [...range]); // [1, 2, 3, 4]

for (const num of range) {
  console.log("Yielded:", num);
}

Common Iterables Across JavaScript

• Built-in data structures: Array, String, Map, Set, and TypedArray.
• Web API collections: DOM NodeList, URLSearchParams, and FormData.
• Non-iterables: Plain {} objects are not iterable by default; iterate them via Object.keys(obj) or Object.entries(obj).

Common Mistakes to Avoid

• Trying [...plainObject]: Spreading a plain object inside square brackets throws TypeError: plainObject is not iterable. Use { ...plainObject } for objects or Object.entries(plainObject) for arrays.
• Reusing a single-use generator iterator: Calling a generator function directly creates an iterator that exhausts after one for...of pass. Call the generator again or wrap it in [Symbol.iterator].
• Allocating huge arrays just to loop: Lazy generators save memory when streaming large sequences or paginated records.

Frequently Asked Questions

How can I check if a value is iterable in JavaScript?

Check value != null && typeof value[Symbol.iterator] === "function". Strings, arrays, Maps, and Sets all pass this check.

What does Array.from() do with iterables?

Array.from(iterable) consumes any iterable (like a Set, NodeList, or generator) and returns a standard array with all .map() and .filter() methods.

Are JavaScript generators synchronous or asynchronous?

Standard function* generators are synchronous, while async function* creates async iterators consumed with for await...of.