? JavaScript Iterables

? Quick Overview

In JavaScript, an iterable is an object that defines a standard way to be looped over. If an object is iterable, you can use constructs like for...of, the spread syntax [...iterable], and other language features to process its values in sequence. Built-in iterables include arrays, strings, maps, sets, and more.

? Key Concepts

Iterable: Any object that has a Symbol.iterator method.
Iterator: An object returned by calling obj[Symbol.iterator]().
next() method: Returns objects of the form { value, done }.
for...of: Loop that works on any iterable, not just arrays.
Strings are iterable: You can loop through each character.
Custom iterables: You can define your own iteration logic via Symbol.iterator.
Spread syntax: [...iterable] converts any iterable into an array.

? Syntax & Theory

The for...of loop is the most common way to consume iterables:

? View Code Example

for (const item of iterable) {
// use item
}

Under the hood, JavaScript looks for the Symbol.iterator method on the object. That method must return an iterator object, which exposes a next() method. Each call to next() returns:

value: the current item in the sequence.
done: true when the sequence is finished, otherwise false.

? Code Examples

? Iterating over an Array with `for...of`

? View Code Example

const colors = ["red", "green", "blue"];

for (const color of colors) {
console.log(color);
}

// Output:
// red
// green
// blue

? Explanation

The array colors is iterable. The for...of loop automatically uses its built-in iterator to give you each color in order.

? Strings Are Iterable

? View Code Example

const text = "Hello";

for (const char of text) {
console.log(char);
}

// Output:
// H
// e
// l
// l
// o

? Explanation

Strings also implement Symbol.iterator, so you can loop over each character just like you loop over array elements.

? Creating a Custom Iterable

You can define your own iterable by implementing the Symbol.iterator method. A convenient way is to use a generator function (* syntax).

? View Code Example

const myIterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of myIterable) {
console.log(value);
}

// Output:
// 1
// 2
// 3

? Explanation

The object myIterable becomes iterable because it defines [Symbol.iterator](). The generator yields values one by one, which for...of consumes.

? Using Iterables with Spread Syntax

The spread operator ... consumes any iterable and expands its values.

? View Code Example

const str = "ABC";
const letters = [...str];

console.log(letters);

// Output:
// ["A", "B", "C"]

? Explanation

The string "ABC" is iterable, so [...str] creates an array of its characters.

⚙️ Manual Iteration with `.next()`

You can directly work with the iterator object and call next() yourself.

? View Code Example

const arr = [10, 20, 30];
const iterator = arr[Symbol.iterator]();

console.log(iterator.next().value); // 10
console.log(iterator.next().value); // 20
console.log(iterator.next().value); // 30
console.log(iterator.next().done);  // true

? Explanation

Calling arr[Symbol.iterator]() returns an iterator for the array. Each call to next() advances the internal pointer and returns the next value. Once all items are consumed, done becomes true.

? Live Output & Console Behavior

Most iterable examples use console.log(). To see the real output:

Open your browser dev tools (usually F12 or Ctrl+Shift+I).
Go to the Console tab.
Run the code snippets and observe the logged values in order.

? Tips & Best Practices

Use for...of for values, and for...in for object keys.
Whenever you see something that works with [...thing] or for...of, remember: that thing is an iterable.
Use custom iterables when you want to expose a sequence of values without storing them all up front (lazy evaluation).
Use the spread syntax [...iterable] to quickly convert any iterable into an array for further array methods like map, filter, or reduce.

? Try It Yourself

Use for...of to loop through a string (e.g., "JavaScript") and log each character.
Create a custom iterable that yields the first 5 even numbers: 2, 4, 6, 8, 10, then loop over it with for...of.
Convert a string into an array of characters using the spread operator: const chars = [..."iterable"];
Manually call next() on an iterator and log both value and done until the sequence finishes.