Iterables & Generators in JavaScript Overview

JavaScript provides mechanisms to iterate over data structures in a systematic way. The key concepts are Iterables, Iterators, and Generators.

1. Iterables

An iterable is an object that implements the Symbol.iterator method, which returns an iterator. Iterables can be used in loops like for...of.

Common Iterables:

Arrays
Strings
Maps
Sets
Custom objects implementing Symbol.iterator

Example: Array Iterable

const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value);
}
// Output: 1 2 3

Example: Custom Iterable

const myIterable = {
  data: [10, 20, 30],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => ({
        value: this.data[index++],
        done: index > this.data.length
      })
    };
  }
};

for (const value of myIterable) {
  console.log(value);
}
// Output: 10 20 30

2. Iterators

An iterator is an object that provides a next() method, returning an object with:

value: the next value in the sequence
done: true if iteration is complete, otherwise false

Example:

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();

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

3. Generators

A generator is a special type of function that can pause and resume execution. It automatically produces an iterator.

Declared using function* syntax
Uses yield to return values one at a time
next() resumes execution

Example:

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

const gen = myGenerator();

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

4. Iteration Loops and Methods

1. Traditional for Loop

Used for arrays or numeric iteration.

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

2. for...of Loop

Used to iterate over iterable objects (like arrays, strings, sets, maps).

const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
  console.log(fruit);
}
// apple, banana, orange

3. for...in Loop

Used to iterate over object keys (property names) — not ideal for arrays.

const person = { name: "Alice", age: 25 };
for (const key in person) {
  console.log(key, person[key]);
}
// name Alice
// age 25

4. .forEach() Method

Used for arrays, executes a callback for each element.

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num));
// 1, 2, 3

5. Spread Operator (...)

Used to expand iterables into elements.

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]