JavaScript Iterators Cheat Sheet
An iterator is an object that allows you to traverse through a collection (like arrays, strings, etc.) one element at a time.
1. What is an Iterator?
An iterator is an object with a next() method. The next() method returns an object with two properties:
value: The current element.done: A boolean that indicates whether the iterator has completed its traversal.
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 }2. Creating Your Own Iterator
You can create your own iterator using an object with a next() method.
const myIterator = {
current: 0,
last: 5,
next() {
if (this.current <= this.last) {
return { value: this.current++, done: false };
} else {
return { value: undefined, done: true };
}
}
};
console.log(myIterator.next()); // { value: 0, done: false }
console.log(myIterator.next()); // { value: 1, done: false }
// ...
console.log(myIterator.next()); // { value: undefined, done: true }3. Iterating Over Arrays with `for...of`
The for...of loop works directly with iterators and is an easy way to loop over iterable objects like arrays.
const arr = [10, 20, 30];
for (const value of arr) {
console.log(value); // 10, 20, 30
}4. `Symbol.iterator` (Built-In Iterable)
Every iterable object in JavaScript (like arrays, strings, maps, and sets) has a built-in Symbol.iterator method that returns the default iterator for that object.
const str = 'Hello';
const iterator = str[Symbol.iterator]();
console.log(iterator.next()); // { value: 'H', done: false }
console.log(iterator.next()); // { value: 'e', done: false }
console.log(iterator.next()); // { value: 'l', done: false }5. Using `Array.prototype.entries()`
- The
entries()method returns an iterator object with both index and value of the array elements.
const arr = ['a', 'b', 'c'];
const iterator = arr.entries();
console.log(iterator.next()); // { value: [0, 'a'], done: false }
console.log(iterator.next()); // { value: [1, 'b'], done: false }
console.log(iterator.next()); // { value: [2, 'c'], done: false }6. `Map` and `Set` Iterators
Both Map and Set objects are iterables, and they provide their own iterators.
Map Iterator
const map = new Map([
['name', 'Alice'],
['age', 25]
]);
const iterator = map.entries(); // Returns [key, value] pairs
console.log(iterator.next()); // { value: ['name', 'Alice'], done: false }
console.log(iterator.next()); // { value: ['age', 25], done: false }Set Iterator
const set = new Set([1, 2, 3]);
const iterator = set.values();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }7. Custom Iterable Object
You can make any object iterable by defining the Symbol.iterator method.
const range = {
start: 0,
end: 5,
[Symbol.iterator]() {
let current = this.start;
const last = this.end;
return {
next() {
if (current <= last) {
return { value: current++, done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
};
for (const num of range) {
console.log(num); // 0, 1, 2, 3, 4, 5
}8. Using `for...in` vs `for...of`
for...initerates over the keys of an object or array.for...ofiterates over the values of an iterable object.
const arr = [10, 20, 30];
// `for...in` iterates over indices (keys)
for (const index in arr) {
console.log(index); // 0, 1, 2
}
// `for...of` iterates over values
for (const value of arr) {
console.log(value); // 10, 20, 30
}9. `Iterable` and `Iterator` Interfaces
- Iterable: An object that has a
Symbol.iteratormethod and can be used infor...of. - Iterator: An object returned by
Symbol.iterator, which has anext()method.