JavaScript Iterables

An iterable is any object that implements the Symbol.iterator method. Iterables can be used with for...of loops, the spread operator, destructuring, and other constructs that expect iterable data.

The Iterable Protocol

An object is iterable if it has a [Symbol.iterator]() method that returns an iterator object. Built-in iterables include strings, arrays, Maps, Sets, TypedArrays, and arguments objects.

Checking Iterability

// Built-in iterables
const arr = [1, 2, 3];
const str = "Hello";
const set = new Set([1, 2, 3]);
const map = new Map([["a", 1]]);

// Check if iterable
function isIterable(obj) {
  return obj != null && typeof obj[Symbol.iterator] === 'function';
}

console.log("Array:", isIterable(arr));
console.log("String:", isIterable(str));
console.log("Set:", isIterable(set));
console.log("Map:", isIterable(map));
console.log("Number:", isIterable(42));
console.log("Object:", isIterable({ a: 1 }));

📝 Note: Plain objects ({}) are NOT iterable by default. You cannot use for...of on them directly. Use Object.entries(), Object.keys(), or Object.values() instead, which return iterable arrays.

for...of with Iterables

The for...of loop works with any iterable object. It calls the iterator behind the scenes and processes each value the iterator yields.

for...of Loops

// Iterating arrays
for (const num of [10, 20, 30]) {
  console.log("Array:", num);
}

// Iterating strings
for (const char of "Hi!") {
  console.log("Char:", char);
}

// Iterating Maps
const map = new Map([["a", 1], ["b", 2]]);
for (const [key, value] of map) {
  console.log(`Map: ${key} = ${value}`);
}

// Iterating Sets
const set = new Set(["x", "y", "z"]);
for (const item of set) {
  console.log("Set:", item);
}

Spread Operator on Iterables

The spread operator (...) works on any iterable, allowing you to expand elements into arrays, function arguments, or other iterable contexts.

Spread on Iterables

// Spread string into array of characters
const chars = [..."Hello"];
console.log("String spread:", chars);

// Spread Set into array
const set = new Set([3, 1, 4, 1, 5]);
const arr = [...set];
console.log("Set spread:", arr);

// Spread Map entries
const map = new Map([["x", 10], ["y", 20]]);
const entries = [...map];
console.log("Map spread:", entries);

// Combine iterables
const combined = [...[1, 2], ...new Set([3, 4]), ..."AB"];
console.log("Combined:", combined);

// Spread in function call
const nums = [5, 2, 8, 1, 9];
console.log("Max:", Math.max(...nums));

Destructuring Iterables

Destructuring assignment works with any iterable, not just arrays. This means you can destructure strings, Sets, Maps, and custom iterables.

Destructuring Iterables

// Array destructuring
const [a, b, c] = [1, 2, 3];
console.log("Array:", a, b, c);

// String destructuring
const [first, second, ...rest] = "Hello";
console.log("String:", first, second, rest);

// Set destructuring
const [x, y] = new Set([10, 20, 30]);
console.log("Set:", x, y);

// Map destructuring
const [[k1, v1], [k2, v2]] = new Map([["a", 1], ["b", 2]]);
console.log("Map:", k1, v1, k2, v2);

// Swap using destructuring
let p = 1, q = 2;
[p, q] = [q, p];
console.log("Swapped:", p, q);

Built-in Iterables Summary

Here is a summary of all built-in iterables in JavaScript and what they yield when iterated.

Iterable	Yields	Example
Array	Elements	[1, 2, 3]
String	Characters (code points)	"Hello"
Map	[key, value] pairs	new Map()
Set	Values	new Set()
TypedArray	Elements	new Uint8Array()
arguments	Arguments	function args
NodeList	DOM nodes	querySelectorAll()

Exercise:

Which of the following is NOT iterable by default?

ArrayStringPlain object {}Set

❮ JS Map Methods JS Iterators ❯