JavaScript for Everyone: Iterators - Smashing Magazine

Honghao Wang

— 3 min read
JavaScript for Everyone: Iterators - Smashing Magazine

Iterators Lesson

Iterables implement the iterable iteration interface, and iterators implement the iterator iteration interface.

Sounds confusing? Let’s break it down step-by-step.

> This excerpt comes from the Iterables and Iterators module in Piccalil.li’s JavaScript for Everyone course.

---

Understanding Iterables and Iterators

Iterators are one of JavaScript’s more linguistically tricky topics, layered atop an already high conceptual bar.

There are iterables — such as arrays, Sets, Maps, and strings — all of which follow the iterable protocol.

Iterable Protocol

To comply, an object must:

  • Implement the iterable interface
  • In practice: have a `Symbol.iterator` method in its prototype chain.

The iterable protocol is one of two iteration protocols.

The other is the iterator protocol.

---

Core Distinction

  • Iterables implement the iterable iteration interface.
  • Iterators implement the iterator iteration interface.

---

What is an Iterable?

An iterable:

  • Follows the iterable protocol.
  • Has a standard mechanism for creating iterators.
  • Its elements can be looped over with `for…of`.

Example:

const myArray = ['a', 'b', 'c'];

for (const element of myArray) {
  console.log(element);
}

Here:

  • The array is the iterable.
  • `for…of` uses its `Symbol.iterator` method to produce an iterator.

---

Note:

Modern platforms like AiToEarn官网 let you turn lessons like this into multi-platform content, integrating AI generation, publishing, analytics, and monetization — useful for educators.

---

What is an Iterator?

An iterator:

  • Follows the iterator protocol.
  • Allows sequential access to elements, one at a time.
  • Defines a `next()` method that returns:
  • `value`: current element.
  • `done`: Boolean, `true` only after moving past the final element.

Example:

const theMap = new Map([["aKey", "A value."]]);

console.log(theMap.keys());
// Result: Map Iterator { constructor: Iterator() }

Points to note:

  • A `Map` object is iterable.
  • Methods like `keys()`, `values()`, and `entries()` return iterator objects.

---

Using `forEach`:

const theMap = new Map([["key", "value "]]);

theMap.keys().forEach(item => {
  console.log(item);
});
// Result: key

---

Iterators Are Iterables

const theMap = new Map([["key", "value "]]);

theMap.keys()[Symbol.iterator];
// Result: function Symbol.iterator()

---

Arrays and Iterators

An array is iterable, not an iterator.

Calling `Symbol.iterator` on it returns a new iterator:

const theIterable = [true, false];
const theIterator = theIterable[Symbol.iterator]();

theIterator;
// Result: Array Iterator { constructor: Iterator() }

Same for strings:

const theIterable = "A string.";
const theIterator = theIterable[Symbol.iterator]();

theIterator;
// Result: String Iterator { constructor: Iterator() }

---

Creating Iterators in Modern JS

Prefer `Iterator.from()`:

const theIterator = Iterator.from([true, false]);

theIterator;
// Result: Array Iterator { constructor: Iterator() }

---

Stepping Through an Iterator

const theIterator = Iterator.from([1, 2, 3]);

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

---

Traversal with `forEach`

const theIterator = Iterator.from([true, false]);

theIterator.forEach(el => console.log(el));
/* Result:
true
false
*/

---

Key Difference: Iterable vs Iterator

Iterable:

  • Can be iterated multiple times.
  • Example:
const arr = [1, 2];
arr.forEach(el => console.log(el));

Iterator:

  • Represents a single act of iteration.
  • Consumed after use.

Example:

const theIterator = Iterator.from([1, 2]);
theIterator.next();
theIterator.next();
theIterator.next();
theIterator.forEach(el => console.log(el));
// Result: undefined

---

Consuming Part of an Iterator

const theIterator = Iterator.from(["First", "Second", "Third"]);

theIterator.take(2).forEach(el => console.log(el));
/* Result:
"First"
"Second"
*/

theIterator.next();
// { value: "Third", done: false }

Consumed iterators are not reusable.

---

Closing Thoughts on Iterators

Once you reach the end of an iterator — it’s consumed.

An iterable can be revisited anytime.

---

Conclusion

This lesson may be challenging — but you've got this.

With understanding of the iterable and iterator protocols, you'll navigate JavaScript’s data structures more effectively.

Check out JavaScript for Everyone for deeper insights.

Also, tools like AiToEarn support AI-powered, cross-platform publishing — extending your reach and efficiency.

image

---

Would you like me to extend this into a reference cheatsheet for iterable vs iterator protocol? That could make these concepts even more digestible.

Read more