JavaScript Iterator & Iterable Interview Questions

The iterator protocol

An iterator is any object with a next() method that returns { value, done }.

// A manual iterator — counting from 1 to 3
const counter = {
  current: 1,
  last: 3,
  next() {
    if (this.current <= this.last) {
      return { value: this.current++, done: false }
    }
    return { value: undefined, done: true }
  }
}

counter.next()  // { value: 1, done: false }
counter.next()  // { value: 2, done: false }
counter.next()  // { value: 3, done: false }
counter.next()  // { value: undefined, done: true }
counter.next()  // { value: undefined, done: true } — stays exhausted

The iterable protocol

An iterable is any object with a [Symbol.iterator]() method that returns a fresh iterator.

// Making an object iterable — the range example
const range = {
  from: 1,
  to: 5,

  [Symbol.iterator]() {
    let current = this.from
    const last  = this.to
    return {
      next() {
        return current <= last
          ? { value: current++, done: false }
          : { value: undefined, done: true }
      }
    }
  }
}

// Now range works with EVERYTHING that consumes iterables:
for (const n of range) console.log(n)  // 1 2 3 4 5
const arr = [...range]                 // [1, 2, 3, 4, 5]
const [first, second] = range          // first=1, second=2
Array.from(range)                      // [1, 2, 3, 4, 5]
new Set(range)                         // Set {1, 2, 3, 4, 5}
Math.max(...range)                     // 5

Built-in iterables

// All of these implement [Symbol.iterator]:
// Array, String, Map, Set, TypedArray, NodeList, arguments, generators

// String — iterates by Unicode code point (not UTF-16 code unit!)
for (const char of 'hello') console.log(char)  // h, e, l, l, o
[...'hello']  // ['h', 'e', 'l', 'l', 'o']

// Correctly handles emoji (multi-code-unit characters):
[...'👋🌍']   // ['👋', '🌍'] — correct: 2 items
'👋🌍'.split('')  // ['?', '?', '?', '?'] — wrong: splits UTF-16 code units

// Map — iterates as [key, value] pairs
const map = new Map([['a', 1], ['b', 2]])
for (const [key, val] of map) console.log(key, val)

// Set — iterates values in insertion order
for (const val of new Set([1, 2, 3])) console.log(val)

// arguments object — iterable in modern JS
function sum() {
  return [...arguments].reduce((a, b) => a + b, 0)
}

Generators — iterators made simple

Writing iterators manually requires boilerplate. Generator functions produce iterators automatically, with yield providing each value.

// Generator function — asterisk after function keyword
function* range(from, to) {
  for (let i = from; i <= to; i++) {
    yield i  // pause, return this value, resume from here next time
  }
}

const r = range(1, 5)
r.next()  // { value: 1, done: false }
r.next()  // { value: 2, done: false }
// ...
r.next()  // { value: 5, done: false }
r.next()  // { value: undefined, done: true }

// Generator IS an iterable too (it has [Symbol.iterator] that returns itself)
for (const n of range(1, 5)) console.log(n)  // 1 2 3 4 5
[...range(1, 5)]  // [1, 2, 3, 4, 5]

// Infinite sequence — no problem, we pull values on demand (lazy)
function* naturals() {
  let n = 1
  while (true) yield n++
}

const gen = naturals()
gen.next().value   // 1
gen.next().value   // 2
gen.next().value   // 3
// Never allocates a full array — one value at a time

yield* — delegating to another iterable

function* concat(...iterables) {
  for (const iterable of iterables) {
    yield* iterable  // yield every value from iterable
  }
}

[...concat([1, 2], [3, 4], [5])]  // [1, 2, 3, 4, 5]

// Flatten arbitrary depth:
function* flatten(arr) {
  for (const item of arr) {
    if (Array.isArray(item)) yield* flatten(item)
    else yield item
  }
}

[...flatten([1, [2, [3, [4]]]])]  // [1, 2, 3, 4]

Two-way communication with generators

// yield can also RECEIVE values via next(value)
function* adder() {
  let total = 0
  while (true) {
    const n = yield total  // yield current total, receive next number
    total += n
  }
}

const add = adder()
add.next()     // { value: 0, done: false } — start it (first next() ignores arg)
add.next(10)   // { value: 10, done: false } — added 10
add.next(20)   // { value: 30, done: false } — added 20
add.next(5)    // { value: 35, done: false } — added 5

// This two-way channel is exactly what async generators and redux-saga use
// to coordinate async workflows

Async iteration — iterating Promises

// for await...of — consume async iterables
async function* paginate(url) {
  let page = 1
  while (true) {
    const data = await fetch(`${url}?page=${page}`).then(r => r.json())
    if (data.items.length === 0) return  // done
    yield data.items
    page++
  }
}

// Consume page by page — only fetches next page when ready for it
async function processAll() {
  for await (const items of paginate('/api/products')) {
    items.forEach(processItem)
  }
}

// Node.js Readable streams are async iterables:
const { createReadStream } = require('fs')
async function readFile(path) {
  const lines = []
  for await (const chunk of createReadStream(path, { encoding: 'utf8' })) {
    lines.push(chunk)
  }
  return lines.join('')
}

Custom iterable class — practical example

class LinkedList {
  constructor() { this.head = null }

  push(value) {
    this.head = { value, next: this.head }
  }

  // Make LinkedList iterable — works with for...of, spread, destructuring
  [Symbol.iterator]() {
    let node = this.head
    return {
      next() {
        if (node) {
          const value = node.value
          node = node.next
          return { value, done: false }
        }
        return { value: undefined, done: true }
      }
    }
  }
}

const list = new LinkedList()
list.push(3); list.push(2); list.push(1)

for (const val of list) console.log(val)  // 1 2 3
const arr = [...list]                     // [1, 2, 3]
const [first] = list                      // first = 1