Iterables are a core concept in modern JavaScript that make it easy to work with sequences of data. They are widely used with loops, the spread operator, and many built-in JavaScript features. In this tutorial, you will learn what iterables are, how they work, and how to use them with clear and simple examples.

What Are Iterables in JavaScript?

An iterable is any object whose elements can be accessed one by one in a sequence. JavaScript defines a standard way to do this using the iterator protocol.

If an object can be used with the for...of loop, it is an iterable.

Common built-in iterables in JavaScript include:

  • Arrays

  • Strings

  • Maps

  • Sets

  • Typed Arrays

Why Iterables Are Important

Iterables allow JavaScript to:

  • Loop over data in a clean and readable way

  • Work consistently with different data structures

  • Support features like for...of, spread operator (...), and destructuring

The Iterable Protocol (In Simple Terms)

An object is iterable if it has a method with the key:

JavaScript
1Symbol.iterator

This method returns an iterator object.
The iterator object has a next() method, which returns:

  • value: the current item

  • done: true when iteration is finished

You usually don’t need to implement this yourself, but understanding it helps conceptually.

Using Iterables with for...of

The for...of loop is the most common way to work with iterables.

Example: Array as an Iterable

JavaScript
1const numbers = [1, 2, 3];
2
3for (const num of numbers) {
4 console.log(num);
5}

Explanation:

  • Arrays are iterable by default

  • for...of accesses each element one by one

  • Output will be: 1 2 3

Example: String as an Iterable

JavaScript
1const text = "JavaScript";
2
3for (const char of text) {
4 console.log(char);
5}

Explanation:

  • Strings are iterated character by character

  • Useful for text processing and validation

Iterables vs for...in

A common confusion is between for...of and for...in.

JavaScript
1const arr = ["a", "b", "c"];
2
3for (const index in arr) {
4 console.log(index);
5}
6
7for (const value of arr) {
8 console.log(value);
9}

Difference:

  • for...in → iterates over keys (indexes)

  • for...of → iterates over values (recommended for iterables)

Using the Spread Operator with Iterables

The spread operator works only with iterables.

Example:

JavaScript
1const letters = ["a", "b"];
2const moreLetters = [...letters, "c", "d"];
3
4console.log(moreLetters);

Explanation:

  • The iterable is expanded into individual values

  • Output: ["a", "b", "c", "d"]

Iterables in Map and Set

Map Example

JavaScript
1const userMap = new Map([
2 ["id", 1],
3 ["role", "admin"]
4]);
5
6for (const [key, value] of userMap) {
7 console.log(key, value);
8}

Explanation:

  • Maps are iterable as [key, value] pairs

  • Very useful for structured data

Set Example

JavaScript
1const uniqueNumbers = new Set([1, 2, 2, 3]);
2
3for (const num of uniqueNumbers) {
4 console.log(num);
5}

Explanation:

  • Sets store unique values

  • Iteration happens in insertion order

Manually Using an Iterator (Optional Concept)

You can directly access the iterator behind an iterable.

JavaScript
1const array = [10, 20];
2const iterator = array[Symbol.iterator]();
3
4console.log(iterator.next());
5console.log(iterator.next());
6console.log(iterator.next());

Explanation:

  • Each next() call returns the next value

  • When finished, done becomes true

What Is NOT Iterable?

Some objects are not iterable by default, such as plain objects.

JavaScript
1const obj = { a: 1, b: 2 };
2
3// This will cause an error
4// for (const item of obj) {}

To iterate over objects, use:

JavaScript
1Object.keys(obj)
2Object.values(obj)
3Object.entries(obj)

Key Points to Remember

  • Iterables allow sequential access to data

  • for...of works only with iterables

  • Arrays, strings, maps, and sets are iterable by default

  • Iterables power modern JavaScript features like spread and destructuring

  • Plain objects are not iterable unless converted

Conclusion

Iterables make JavaScript cleaner, more readable, and more powerful when working with collections of data. Once you understand iterables, many ES6 features become easier to use and reason about. Mastering iterables is essential for writing modern, efficient JavaScript code.