JavaScript for…of Loop Explained: Syntax, Examples, and Best Practices

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

When working with data in JavaScript, repetition is essential. To process data such as arrays and strings in order, JavaScript provides several loop syntaxes. Among them, the for…of statement stands out as a simple yet powerful option.

In this article, we will explain JavaScript’s for…of statement in detail—from the basics to more advanced use cases. We’ll start with beginner-friendly examples and then cover practical patterns used in intermediate and real-world development. After reading this, you’ll be able to use the for…of statement confidently without getting stuck when writing loops.

2. What Is JavaScript’s for…of Statement? Basic Usage

2.1 Overview of the for…of Statement

JavaScript’s for…of statement is a syntax that lets you loop through iterable objects in a clean and simple way. It is designed to efficiently handle data structures such as arrays, strings, Map, and Set.

2.2 Basic Syntax of the for…of Statement

Use the following syntax to process each element of an iterable object in order.

for (const element of arrayOrObject) {
  // 반복 처리
}

This syntax is useful when you want to easily retrieve each element from an array or string.

2.3 Practical Code Examples

Example 1: Output array elements in order

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

Output:

Apple  
Banana  
Orange  

Example 2: Output each character of a string

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

Output:

J  
a  
v  
a  
S  
c  
r  
i  
p  
t  

2.4 Supported Data Types

The for…of statement can be used with the following iterable objects:

1. Arrays (Array)
2. Strings (String)
3. Map objects
4. Set objects
5. The arguments object (an object passed as function arguments)
6. NodeList objects (a collection of HTML elements)

Note: You cannot apply it directly to object literals (we will explain the workaround later).

3. Differences and Comparisons with Other Loop Syntax

3.1 Differences Between for…of and for…in

Example: Using for…in

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // a, b, c
}

Important Note:
Because for…in can enumerate properties from the prototype chain as well, you should be careful—especially when looping through objects.

3.2 Differences Between for…of and forEach

Example: Using forEach

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

Important Note:
Since forEach cannot stop the loop early, the for…of statement is recommended when control flow is important.

4. Practical Examples and Advanced Techniques

4.1 Filtering an Array

The following example outputs only even numbers.

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

Output:

2  
4  

4.2 Getting Keys and Values from a Map

This example shows how to retrieve keys and values using a Map object.

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Output:

name: Taro  
age: 25  

4.3 Combining with Asynchronous Processing

Below is an example of handling asynchronous operations with the for…of statement.

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

In this example, each API request is executed in order, so you can fetch data while preserving the execution sequence.

5. Notes and Troubleshooting

5.1 When You Get an Error with Objects

The for…of statement cannot be used with object literals. Instead, use Object.entries().

Example: Processing with Object.entries()

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Output:

a 1  
b 2  

With this approach, you can efficiently iterate through an object’s keys and values.

5.2 Performance Considerations

The for…of statement generally provides sufficient performance for typical use cases, but you should be careful when working with large datasets. If needed, consider using an index-based for loop or a while loop.

Example: Index-based for loop

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 Adding Error Handling

When combining asynchronous processing with the for…of statement, make sure to include proper error handling.

Example: Handling errors with try…catch

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. FAQ Section

Q1: Does the for…of statement work in all browsers?

A1:
The for…of statement was introduced in ES6 (ECMAScript 2015). It is supported in modern browsers, but it does not work in Internet Explorer.

Supported Browsers:

• Google Chrome 38 or later
• Firefox 36 or later
• Safari 7.1 or later
• Edge 12 or later

If you need to support older browsers, use Babel to transpile your code or choose another loop syntax.

Q2: How can I get the index when using for…of?

A2:
With for…of, you cannot directly access indexes, but you can use the entries() method to retrieve both the index and the value at the same time.

Example:

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

Output:

0 Apple  
1 Banana  
2 Orange  

Q3: Can I use for…of with object literals?

A3:
No. The for…of statement is only for iterable objects. Object literals are not iterable, but you can iterate through keys and values using Object.entries().

Example:

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Output:

a 1  
b 2  

Q4: Can I use for…of with asynchronous operations?

A4:
Yes. You can use it together with async/await.

Example:

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Q5: What is the difference between for…of and forEach?

A5:
The table below summarizes the differences.

7. Summary

In this article, we covered the following key points about JavaScript’s for…of statement.

• How to understand the basic syntax and usage examples and apply it to iterating over arrays and strings
• The differences and best use cases compared to other loop syntaxes such as for…in and forEach
• Advanced examples including Map and Set objects, as well as combining it with asynchronous processing
• A practical FAQ section to resolve common questions

7.1 Benefits of the for…of Statement

• Simple and highly readable
• Flexible support for iterable objects
• Easy loop control because it supports break and continue

8. What to Learn Next

Once you master the for…of statement, it’s a good idea to learn the following features as your next step.

1. Spread Syntax (…)

• A useful feature for expanding and merging arrays and objects.

1. Destructuring Assignment

• A technique for easily extracting values from arrays and objects.

1. Promises and async/await in more detail

• Learn efficient ways to write asynchronous code.

By combining these features, you’ll be able to build more advanced JavaScript programs.

Final Thoughts

This article provided a complete guide to JavaScript’s for…of statement, covering everything from the basics to practical use cases for real development.

Example actions for your next step:

• Implement the for…of statement in your own code and experiment with it.
• Try processing arrays, Map, and Set to deepen your understanding.
• Challenge yourself with more advanced ES6 features to level up your skills.