Overview of the for...of Statement

The for...of statement is a loop used to iterate over iterable objects.
In JavaScript, an object is considered iterable if it follows the Iterable Protocol.

In this article, we'll explore what iterable objects are, how the for...of loop works, and important considerations to keep in mind when using it.

Overview of the for...of Statement and Iterable Objects

The for...of statement is a type of loop introduced in ECMAScript 2015 (ES6).
It provides a convenient way to iterate over the elements of iterable objects, such as DOM collections.

DOM collections like HTMLCollection and NodeList are array-like objects that are also iterable.

In this context, understanding the concept of iterable objects is essential.

What Is an Iterable Object?

The for...of loop is designed specifically for iterating over iterable objects.
To use this loop effectively, you need to understand what an iterable object is.

The Iterable Protocol

Before ES6, JavaScript had no unified protocol for objects that could be iterated over.
Arrays, strings, array-like objects, and DOM collections each had their own ways of being iterated—using for loops, for...in loops, or methods like forEach().

To address this inconsistency, JavaScript introduced a standard called the Iterable Protocol. This protocol defines a consistent way to describe iterable behavior.

An object is considered iterable if it implements the Symbol.iterator method, which returns an iterator.

The protocol is based on two key components:

  • A method named Symbol.iterator defined on the object
  • An iterator object returned by that method

These elements form the foundation that makes the for...of loop possible.

You don't need to understand the internal mechanics right away, but here is the key takeaway:

If an object is iterable, you can use a for...of loop to iterate over it in a consistent and standardized way.

Types of Iterable Objects

  • Arrays: You can loop through each element of an array.
  • Strings: You can iterate over each character in a string.
  • DOM collections: HTMLCollection and NodeList are iterable.
  • Map and Set: You can iterate over entries in a Map and values in a Set.

Note:
Plain objects (like object literals) and classes are not iterable by default.

With the for...of loop, you can access each item in an iterable object and perform data processing efficiently.

Using the for...of Statement

The for...of statement is used in JavaScript to iterate over iterable objects.

Basic Syntax and Behavior

The basic syntax of the for...of statement is as follows:

JavaScript 
for (variable of iterable) {
    // code to execute
}
  • variable: The name of the variable that will store the current element being iterated. This variable is updated on each loop iteration and can be used within the loop body.
  • iterable: The iterable object to iterate over. This can be an array, string, Map, Set, NodeList, and other iterable types.

Let's look at a few examples to better understand how it works.

Iterating Over an Array

JavaScript 
const iterable = [1, 2, 3, 4, 5]; // Iterating Over an Array

for (const item of iterable) {
    console.log(item);
}
The console output will be:

In this example, the item variable is updated with each element from the iterable array. The console.log(item) statement prints each value to the console.

Let's take a closer look at another example.

Iterating Over a String

JavaScript 
const iterable = "Hello"; // Iterating Over a String

for (const char of iterable) {
    console.log(char);
}
The console output will be:

In this example, the for...of loop iterates over each character in the string and logs it to the console.

Iterating Over DOM Collections (NodeList)

If you use a DOM method like document.querySelectorAll() to select elements, the result is a NodeList, which is also iterable.

HTML 
<div></div>
<div></div>
<div></div>
<div></div>
JavaScript 
const elements = document.querySelectorAll("div"); // NodeList

for (const element of elements) {
    console.log(element);
}
The console output will be:

This loop logs each <div></div> element to the console.

As shown above, the for...of loop is a clean and concise way to iterate over a variety of iterable objects. Since it uses the iterator protocol internally, you can also use it with custom iterable objects.

Important Considerations When Using for...of

While the for...of loop is a powerful and convenient way to iterate over iterable objects, there are some limitations and caveats to be aware of.

  1. No Access to Array Indexes
  2. Not Usable with Plain Objects (Object Literals)

No Access to Array Indexes

The for...of loop gives you direct access to the values of an array, but not to their indexes.

If you need access to both the index and the value, consider using a traditional for loop, a for...in loop, or the forEach() method instead.

JavaScript 
const myArray = [10, 20, 30, 40, 50];

// Using for...of (no index information)
for (const item of myArray) {
    console.log(item);
}

// Using for...in (provides index)
for (const index in myArray) {
    console.log(index, myArray[index]);
}

// Using forEach (value only)
myArray.forEach((item) => {
    console.log(item);
});

In the example above, the for...in loop gives you access to both the index and the value, while forEach() only provides the value—similar to for...of. The key point is that for...of does not provide access to the index directly.

Not Usable with Plain Objects (Object Literals)

The for...of loop cannot be used to iterate over plain objects. because object literals are not iterable by default.

JavaScript 
const myObject = {
    a: 1,
    b: 2,
    c: 3
}

for (const prop of myObject) {
    console.log(prop);
}
// TypeError: myObject is not iterable

To iterate over the properties of a plain object, use a for...in loop or convert the object into an iterable structure using Object.keys(), Object.values(), or Object.entries():

JavaScript 
for (const prop in myObject) {
    console.log(myObject[prop]);
}

for (const [key, value] of Object.entries(myObject)) {
    console.log(key, value);
}

These methods give you flexible options for iterating over an object's keys and values in a structured and readable way.

Specifications

Specification for the for...of Statement
Specification
for...of ECMAScript Language Specification
#sec-for-in-and-for-of-statements

Browser compatibility

Browser Compatibility for the for...of Statement
Statement
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
for...of 38 12 13 7

References

See also