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!

What's Next?

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