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 sequencedone:trueif iteration is complete, otherwisefalse
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
yieldto 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]