Academy — Sanjib Sikder

Something Has Been Hidden From You

Every time you wrote for...of, spread an array, or destructured a value, something was running underneath that you never saw. All three use the same protocol — the iterator protocol.

Start by seeing that arrays, strings, and maps all share something:

JavaScript

Ctrl+Enter to run

// for...of works on arrays, strings, Sets, Maps — why?
const arr = [10, 20, 30];
const str = "hello";
const set = new Set([1, 2, 3]);

for (const x of arr) process.stdout ? null : console.log("array:", x);
for (const x of arr) { console.log("array:", x); break; }

// They all have Symbol.iterator
console.log(typeof arr[Symbol.iterator]); // function
console.log(typeof str[Symbol.iterator]); // function
console.log(typeof set[Symbol.iterator]); // function

// A plain object does NOT
const obj = { a: 1 };
console.log(typeof obj[Symbol.iterator]); // undefined — can't use for...of on plain objects

Symbol.iterator is a special key. If an object has it, JavaScript considers it iterable and lets you use for...of, spread, and destructuring on it. If it doesn't, you get a TypeError.

The Iterator Protocol

An iterator is any object with a next() method that returns { value, done }. Let's build one by hand:

JavaScript

Ctrl+Enter to run

// Build an iterator manually — no magic
function rangeIterator(start, end) {
  let current = start;

return {
next() {
if (current <= end) {
return { value: current++, done: false };
} else {
return { value: undefined, done: true };
}
}
};
}

const iter = rangeIterator(1, 5);

console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: 4, done: false }
console.log(iter.next()); // { value: 5, done: false }
console.log(iter.next()); // { value: undefined, done: true }

That is the entire protocol. next() returns the next value and whether the sequence is exhausted. for...of calls next() in a loop until done is true. Spread does the same thing. Destructuring does the same thing. One protocol, many consumers.

Making Your Own Iterable

To make an object work with for...of, give it a [Symbol.iterator] method that returns an iterator:

JavaScript

Ctrl+Enter to run

class Range {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end   = end;
    this.step  = step;
  }

[Symbol.iterator]() {
let current = this.start;
const { end, step } = this;

    return {
      next() {
        if (current <= end) {
          const value = current;
          current += step;
          return { value, done: false };
        }
        return { value: undefined, done: true };
      }
    };

}
}

const r = new Range(0, 10, 2);

// for...of works
for (const n of r) {
process.stdout ? null : console.log(n);
}
for (const n of new Range(0, 10, 2)) { console.log(n); }

// Spread works
console.log([...new Range(1, 5)]);

// Destructuring works
const [first, second, third] = new Range(100, 200, 25);
console.log(first, second, third);

One method added — and suddenly your custom class works with every language feature that understands the protocol. This is why the protocol exists: define it once, plug into everything.

Generators — Functions That Pause

Writing iterators by hand is verbose. Generators are a special function syntax that produces iterators automatically — and they can pause mid-execution and resume later:

JavaScript

Ctrl+Enter to run

// function* — the asterisk makes it a generator
function* count() {
  console.log("About to yield 1");
  yield 1;

console.log("About to yield 2");
yield 2;

console.log("About to yield 3");
yield 3;

console.log("Generator done");
}

const gen = count(); // does NOT run the body yet

console.log("Calling next() for the first time:");
console.log(gen.next()); // runs until first yield

console.log("\nCalling next() again:");
console.log(gen.next()); // runs until second yield

console.log("\nCalling next() again:");
console.log(gen.next()); // runs until third yield

console.log("\nCalling next() one more time:");
console.log(gen.next()); // body is done — done: true

yield is a pause point. The generator runs until it hits yield, hands the value out, and freezes — all local variables, the exact position in the code, everything preserved. The next next() call resumes from exactly where it stopped.

Calling count() returns a generator object. The body does not run at all until you call next().

Generators as Iterables

A generator object is automatically iterable — you can drop it straight into for...of:

JavaScript

Ctrl+Enter to run

function* range(start, end, step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i;
  }
}

// for...of
for (const n of range(1, 5)) {
console.log(n);
}

// Spread
console.log([...range(0, 20, 5)]);

// Destructuring
const [a, b, c] = range(10, 50, 10);
console.log(a, b, c);

// Pass to any function expecting an iterable
const evens = [...range(2, 20, 2)];
const sum = evens.reduce((a, b) => a + b, 0);
console.log("Sum of evens 2–20:", sum);

Compare this to the Range class above — same behaviour, a fraction of the code. Generators earn their syntax.

Infinite Sequences

Generators can yield infinitely — because they only compute the next value when asked. They never materialise the whole sequence:

JavaScript

Ctrl+Enter to run

function* naturals() {
  let n = 1;
  while (true) {        // infinite — but that's fine
    yield n++;
  }
}

function* fibonacci() {
let [a, b] = [0, 1];
while (true) {
yield a;
[a, b] = [b, a + b];
}
}

// Take only what you need — don't spread an infinite generator!
function take(n, iterable) {
const result = [];
for (const x of iterable) {
result.push(x);
if (result.length === n) break;
}
return result;
}

console.log("First 10 naturals:", take(10, naturals()));
console.log("First 10 Fibonacci:", take(10, fibonacci()));

// Or with destructuring
const [f1, f2, f3, f4, f5] = fibonacci();
console.log("First 5 Fibonacci:", f1, f2, f3, f4, f5);

A lazy infinite sequence. No memory wasted on values you'll never use. This is a fundamentally different model from arrays — you pull values one at a time rather than generating all of them upfront.

Passing Values Back Into a Generator

yield is a two-way door. The value you pass to next(value) becomes the result of the yield expression inside the generator:

JavaScript

Ctrl+Enter to run

function* conversation() {
  const name  = yield "What is your name?";
  const marks = yield `Hello ${name}! What are your marks?`;
  const grade = marks >= 75 ? "A" : marks >= 50 ? "B" : "C";

yield `${name}, your grade is ${grade}. Well done!`;
}

const chat = conversation();

const q1 = chat.next(); // start — no value sent yet
console.log(q1.value);

const q2 = chat.next("Rahul"); // send name — resumes, yields next question
console.log(q2.value);

const q3 = chat.next(82); // send marks — resumes, yields result
console.log(q3.value);

This two-way communication is what makes generators powerful for stateful workflows — each yield is a checkpoint where the outside world can both receive a value and send one back.

Generator Composition with yield*

yield* delegates to another iterable — flattening it into the current generator:

JavaScript

Ctrl+Enter to run

function* letters() {
  yield "a";
  yield "b";
  yield "c";
}

function* numbers() {
yield 1;
yield 2;
yield 3;
}

function* combined() {
yield* letters(); // delegates — yields all of letters()
yield "---";
yield* numbers(); // then all of numbers()
yield "done";
}

console.log([...combined()]);

// Practical: flatten a nested structure lazily
function* flatten(arr) {
for (const item of arr) {
if (Array.isArray(item)) {
yield* flatten(item); // recursive delegation
} else {
yield item;
}
}
}

const nested = [1, [2, 3], [4, [5, 6]], 7];
console.log([...flatten(nested)]);

What You Have Learned

Iterators and generators are the machinery underneath for...of, spread, and destructuring — now visible.

The key ideas:

The iterator protocol: any object with next() returning { value, done } is an iterator
The iterable protocol: any object with [Symbol.iterator]() returning an iterator works with for...of, spread, and destructuring
Generators (function*) create iterators automatically — yield pauses, next() resumes
Generators remember their entire local state between calls — position, variables, everything
Infinite generators are safe — they compute values lazily, only when pulled
next(value) passes a value into the generator — yield is a two-way channel
yield* delegates to another iterable — composing sequences without flattening by hand

In the next lesson: Symbols, WeakMap & WeakRef — JavaScript's more obscure but powerful primitives. Symbols give you truly unique keys that never collide. WeakMap lets you attach private data to objects without preventing garbage collection. The tools for writing libraries and frameworks that don't leak memory.

Iterators & Generators

Something Has Been Hidden From You

The Iterator Protocol

Making Your Own Iterable

Generators — Functions That Pause

Generators as Iterables

Infinite Sequences

Passing Values Back Into a Generator

Generator Composition with yield*

What You Have Learned