JS Iterables

Think of a deck of cards, no matter how the deck is organized internally, you can always deal cards one at a time in a predictable, repeatable way until the deck runs out. An iterable in JavaScript is any value that knows how to be 'dealt out' one item at a time, arrays, strings, Sets, and Maps are all iterables, which is exactly why a for...of loop works seamlessly on every one of them. Understanding iterables explains why so many different structures across a project like cookiescursor.com's codebase can all be looped over using the exact same for...of syntax.

In this page:

What Makes Something Iterable
for...of With Strings
for...of With Arrays
for...of With Maps and Sets
Why Iterables Matter

What Makes Something Iterable

A value is considered iterable if it implements a specific internal method, accessible through Symbol.iterator, that defines how to step through its values one at a time.

Note: You don't need to understand Symbol.iterator deeply to use iterables day to day, just know that for...of works on anything built to support it.

Warning: Plain JavaScript objects created with {} do not implement Symbol.iterator by default, so for...of cannot be used on them directly.

Example: What Makes Something Iterable

javascript

const arr = [1, 2, 3];
console.log(typeof arr[Symbol.iterator]); // "function", arr is iterable

for...of With Strings

Strings are iterable, meaning for...of can step through a string one character at a time, correctly handling multi-character symbols better than some older indexing approaches.

Note: Iterating a string with for...of is a clean alternative to a traditional index-based loop when you just need each character in order.

Warning: Iterating a string character by character does not automatically account for complex combined characters found in some non-Latin scripts.

Example: for...of With Strings

javascript

const word = "Hi";
for (let char of word) {
  console.log(char);
}

for...of With Arrays

Arrays are the most common iterable used with for...of, providing direct access to each element's value without requiring manual index tracking.

Note: When you need the index as well as the value while iterating an array, entries() combined with destructuring provides both together.

Warning: for...of gives you values directly, not indexes, if you need the position of each item, use a regular for loop or array.entries() instead.

Example: for...of With Arrays

javascript

const nums = [10, 20, 30];
for (let n of nums) {
  console.log(n);
}

for...of With Maps and Sets

Both Map and Set, covered in more detail in later chapters, are built-in iterables, letting for...of naturally step through a Set's values or a Map's key-value pairs.

Note: Iterating a Map with for...of and destructuring, for (let [key, value] of myMap), is the most common and readable way to work through its entries.

Warning: Iterating a Set gives you values directly, since a Set has no keys, unlike a Map which naturally provides key-value pairs.

Example: for...of With Maps and Sets

javascript

const set = new Set([1, 2]);
for (let v of set) console.log(v);
const map = new Map([["a", 1]]);
for (let [k, v] of map) console.log(k, v);

Why Iterables Matter

The shared iteration protocol is what lets a single, consistent for...of syntax work across many completely different data structures, giving JavaScript a unified way to process collections without learning a separate looping style for each type.

Note: When designing your own custom data structures, implementing Symbol.iterator lets them work seamlessly with for...of and the spread operator too.

Warning: Not every collection-like value is automatically iterable, always verify with a quick test before assuming for...of will work on a custom structure.

Example: Why Iterables Matter

javascript

function sum(iterable) {
  let total = 0;
  for (let n of iterable) total += n;
  return total;
}
console.log(sum([1, 2, 3]));
console.log(sum(new Set([4, 5])));

Common Mistakes

Assuming every object is automatically iterable, plain objects are not iterable by default unless you specifically implement that behavior.
Trying to use for...of directly on a plain object, which throws a TypeError since objects lack a default iteration protocol.
Confusing array-like objects, such as function arguments, with true iterables, some array-like structures need conversion first.

Chapter Summary

An iterable is any value that implements the iteration protocol, allowing it to be looped over with for...of.
Symbol.iterator is the special method that makes a value iterable under the hood.
Strings, arrays, Sets, and Maps are all built-in iterables, while plain objects are not iterable by default.

Browser Support

The iteration protocol, Symbol.iterator, and for...of support for built-in iterables are all supported in every modern browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Loop While Next Lesson → JS Sets

JS Iterables

What Makes Something Iterable

for...of With Strings

for...of With Arrays

for...of With Maps and Sets

Why Iterables Matter

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code