JavaScript For...of Loop

The JavaScript for...of loop allows you to iterate over iterable objects such as arrays, strings, maps, sets, and more. It provides a clean syntax to access each value directly.

Common use cases for the for...of loop include:

  • Iterating over arrays: Access each element directly without using an index.
  • Iterating over strings: Loop through each character in a string.
  • Iterating over other iterables: Such as sets and maps.

What You'll Learn

You’ll learn how to use the for...of loop to iterate over arrays, strings, and other iterable objects using a simple syntax that avoids manual indexing.

Understanding the for...of Loop

Basic syntax of a for...of loop:

javascript
for (const item of iterable) {
  // Code to execute using item
}
  • item: The variable that holds the current element of the iterable.
  • iterable: The object you want to loop over (like an array or string).

Example 1: Iterating Over an Array

Here’s how you can loop through an array using for...of:

javascript
const numbers = [10, 20, 30, 40, 50];
for (const num of numbers) {
  console.log(num);
}

How It Works:

  • The loop automatically goes through each element in the numbers array.
  • The current element is stored in the num variable each iteration.
  • console.log(num) prints each number.

Output

10
20
30
40
50

Example 2: Iterating Over a String

You can use for...of to loop over each character in a string:

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

How It Works:

  • The loop goes through each character in the greeting string.
  • char holds the current character.
  • Each character is printed on a new line.

Output

H
e
l
l
o

Example 3: Iterating Over a Set

You can also iterate over other iterables like Set:

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

How It Works:

  • The for...of loop iterates over each value in the set.
  • Each fruit is logged to the console.

Output

apple
banana
cherry

Exercises

Practice these to reinforce your understanding of the for...of loop:

1. Use a for...of loop to print all elements in ['red', 'green', 'blue'].
javascript
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}
2. Loop through the string "OpenAI" and log each character.
javascript
const str = "OpenAI";
for (const char of str) {
  console.log(char);
}

*Tip: Try changing the array or string to test your knowledge!

Frequently Asked Questions

What is a for...of loop in JavaScript?

A for...of loop allows you to iterate over iterable objects like arrays, strings, sets, and maps. It gives you direct access to values without needing to manage an index.

How is for...of different from a traditional for loop?

The for loop uses indexes and gives you more control, while for...of simplifies iteration by giving direct access to each value in an iterable.

Can you use for...of with strings?

Yes, for...of can iterate through each character in a string one at a time.

Is for...of supported in all browsers?

Yes, it's supported in all modern browsers and environments that support ES6 and above.

Can you use for...of on objects?

No, plain objects are not iterable. You can use Object.keys() or Object.entries() with for...of instead.

What's Next?

Next, you'll explore the for...in loop, which is useful for iterating over the enumerable properties of an object.