JavaScript for of Loop: Complete Guide

The for...of loop iterates over the values of an iterable object. It works on arrays, strings, Maps, Sets, NodeLists, and any other object that implements the iterable protocol. It was introduced in ES6 and is now the recommended way to loop over array elements when you do not need the index.

Unlike a classic for loop, for...of hides the counter and gives you direct access to each value. Unlike forEach, it supports break, continue, and await.

Basic for...of Syntax

javascript

for (const variable of iterable) {
  // use variable
}

The variable is assigned each value from the iterable, one at a time. You can use const because a new binding is created for each iteration.

javascript

const fruits = ["apple", "banana", "cherry"];
 
for (const fruit of fruits) {
  console.log(fruit);
}

Output:

text

apple
banana
cherry

No counter, no index, no .length. Each element is directly available as fruit.

for...of with Strings

Strings are iterable, so for...of gives you each character:

javascript

const word = "Hello";
 
for (const char of word) {
  console.log(char);
}

Output:

text

H
e
l
l
o

This is cleaner than word[i] in a classic for loop and handles multi-byte characters correctly, including emoji and characters outside the Basic Multilingual Plane.

Getting the Index with entries()

When you need both the index and the value, use .entries():

javascript

const colors = ["red", "green", "blue"];
 
for (const [index, color] of colors.entries()) {
  console.log(`${index}: ${color}`);
}

Output:

text

0: red
1: green
2: blue

.entries() returns an iterator of [index, value] pairs. Array destructuring in the loop header unpacks each pair into index and color. This gives you the readability of for...of with the index access of a classic for loop.

for...of with Map and Set

for...of works naturally with Map and Set, two iterable collections introduced in ES6:

javascript

const scores = new Map([
  ["Alice", 92],
  ["Bob", 85],
  ["Carol", 78],
]);
 
for (const [name, score] of scores) {
  console.log(`${name}: ${score}`);
}
// Alice: 92, Bob: 85, Carol: 78

A Map iterates as [key, value] pairs by default, so destructuring works directly without calling .entries().

javascript

const uniqueIds = new Set(["a1", "b2", "c3"]);
 
for (const id of uniqueIds) {
  console.log(id);
}
// a1, b2, c3

A Set iterates over its values one at a time. For more on these, see the Map guide and Set guide.

break and continue in for...of

Unlike forEach, for...of fully supports break and continue:

javascript

const numbers = [3, 7, 0, 12, 5];
 
for (const n of numbers) {
  if (n === 0) continue;  // Skip zeros
  if (n > 10) break;      // Stop at large values
  console.log(n);
}
// Prints: 3, 7

This is one of the biggest reasons to choose for...of over forEach. When you need early exit or iteration skipping, forEach cannot help you. For more, see the break statement guide and continue statement guide.

async/await in for...of

forEach does not wait for async operations, but for...of does:

javascript

const urls = ["/api/users", "/api/posts", "/api/comments"];
 
for (const url of urls) {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}

Each request completes before the next one starts. This sequential execution is the correct behavior when order matters or when you need to rate-limit API calls. forEach would fire all requests at once and not wait for any of them.

for...of with DOM NodeLists

querySelectorAll returns a NodeList, which is iterable:

javascript

const buttons = document.querySelectorAll("button");
 
for (const button of buttons) {
  button.addEventListener("click", () => {
    console.log("Clicked:", button.textContent);
  });
}

This is cleaner than a classic for loop and safer than forEach on older NodeList implementations. Modern browsers support both, but for...of is the more consistent choice across iterables.

What for...of Cannot Do

For plain objects, see looping through objects in JavaScript. For index-based control, see the classic for loop guide.

for...of vs Other Loops

For a detailed side-by-side comparison with tradeoffs, see when to use for, for...of, and forEach.