Understanding Iterators0%
Creating Custom Iterators

Understanding Iterators

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Understanding Iterators in Modern JavaScript

Iteration is the process of looping through elements of a collection one by one. In ES6, JavaScript formalized this process by introducing two core protocols: the Iterable Protocol and the Iterator Protocol. These protocols power fundamental language features such as for...of loops, the spread operator (...), and array destructuring.

1. The Two Iteration Protocols

1. The Iterable Protocol

An object is iterable if it defines an iteration behavior. It does this by implementing a method with the key Symbol.iterator:

  • [Symbol.iterator](): A zero-argument function that returns an object conforming to the Iterator Protocol.

2. The Iterator Protocol

An object is an iterator if it implements a next() method:

  • next(): Must return an object with two properties:
  • value: The current element value (any JS type).
  • done: A boolean (false while iteration continues, true when exhausted).
Output
Iterable Object (e.g. Array, Set, Map)
│
│ Calls [Symbol.iterator]()
▼
Iterator
│
├──► .next() ──► { value: "A", done: false }
├──► .next() ──► { value: "B", done: false }
└──► .next() ──► { value: undefined, done: true }

2. Built-in Iterables

JavaScript includes many built-in iterables:

  • Arrays: [1, 2, 3]
  • Strings: 'hello' (iterates over Unicode code points)
  • Maps: new Map([['a', 1]]) (iterates over [key, value] pairs)
  • Sets: new Set([1, 2, 3])
  • DOM NodeLists: document.querySelectorAll('div')
  • Arguments object: function arguments
JavaScript
const str = 'Hi!';
// Acquire the underlying iterator manually:
const iterator = str[Symbol.iterator]();
 
console.log(iterator.next()); // { value: 'H', done: false }
console.log(iterator.next()); // { value: 'i', done: false }
console.log(iterator.next()); // { value: '!', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

3. How for...of Uses Iterators Internally

The for...of loop is syntactic sugar that manages iterators automatically:

JavaScript
const colors = ['red', 'green', 'blue'];
 
// Under the hood, for...of calls colors[Symbol.iterator]()
// and repeatedly calls iterator.next() until done === true!
for (const color of colors) {
console.log(color);
}

4. Why Plain Objects are NOT Iterable by Default

Plain objects ({ a: 1, b: 2 }) do not have a [Symbol.iterator] method because the order of object keys was historically ambiguous, and it wasn't clear whether iteration should yield keys, values, or entries.

To iterate over objects with for...of, use helper methods:

JavaScript
const user = { name: 'Alex', age: 28 };
 
// Iterate over keys
for (const key of Object.keys(user)) { ... }
 
// Iterate over values
for (const val of Object.values(user)) { ... }
 
// Iterate over entries (key-value pairs)
for (const [k, v] of Object.entries(user)) {
console.log(`${k}: ${v}`);
}
Interactive Quiz

Practice Quiz

Question 1
What well-known Symbol must an object implement to be recognized as iterable by JavaScript?
Question 2
What two properties must the object returned by an iterator's next() method contain?
Question 3
What does done evaluate to when an iterator has produced its final element and has no more items?
Question 4
Which of the following is NOT an iterable by default in JavaScript?
Question 5
What syntax consumes the Iterable Protocol behind the scenes?
Next Lesson

Creating Custom Iterators

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Practical Use CasesCreating Custom Iterators

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext