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

Syntax

javascript

for (const item of iterable) {
  // item is each element
}

const iterator = iterable[Symbol.iterator]();

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.

उदाहरण: 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.

उदाहरण: for...of With Strings

javascript

// Declare the constant `word`, set to "Hi"
// Declare the constant `word`, set to "Hi"
const word = "Hi";
// Loop over `word`, binding each item to `char`
// Loop over `word`, binding each item to `char`
for (let char of word) {
  // Print `char` to the console
  // Print `char` to the console
  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.

उदाहरण: for...of With Arrays

javascript

// Declare the constant `nums`, set to `[10, 20, 30]`
// Declare the constant `nums`, set to `[10, 20, 30]`
const nums = [10, 20, 30];
// Loop over `nums`, binding each item to `n`
// Loop over `nums`, binding each item to `n`
for (let n of nums) {
  // Print `n` to the console
  // Print `n` to the console
  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.

उदाहरण: for...of With Maps and Sets

javascript

// Declare the constant `set` as a new `Set` instance
// Declare the constant `set` as a new `Set` instance
const set = new Set([1, 2]);
for (let v of set) console.log(v);
// Declare the constant `map` as a new `Map` instance
// Declare the constant `map` as a new `Map` instance
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.

उदाहरण: Why Iterables Matter

javascript

// Define the function `sum` taking `iterable`
// Define the function `sum` taking `iterable`
function sum(iterable) {
  // Declare the variable `total`, set to `0`
  // Declare the variable `total`, set to `0`
  let total = 0;
  for (let n of iterable) total += n;
  // Return `total` from this function
  // Return `total` from this function
  return total;
}
// Print `sum([1, 2, 3])` to the console
// Print `sum([1, 2, 3])` to the console
console.log(sum([1, 2, 3]));
// Print `sum(new Set([4, 5]))` to the console
// Print `sum(new Set([4, 5]))` to the console
console.log(sum(new Set([4, 5])));

Live Example

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