The for...of loop

Learn to iterate over array values with for...of.

Looping over values with for...of

The for...of loop iterates over the values of an array. Unlike the classic for loop, it needs no index or counter.

Syntax: for (const element of array) { ... }. On each iteration element takes the next value.

Example: for (const color of colors) { console.log(color); } prints each color.

for...of versus forEach

for...of is a statement; you can exit early with break or skip with continue.

forEach is a method; it cannot be stopped with break. When you need early exit, choose for...of.

For the index, use forEach's second parameter or a classic for loop; for...of does not give the index directly.

Exercise Print the letters array with for...of

Create an array named letters with at least four letter strings. Use for...of to print each letter with console.log.

Show example solution

Write the array with square brackets, then traverse with for...of.
Example solution:
const letters = ["a", "b", "c", "d"];
for (const letter of letters) {
  console.log(letter);
}

Test yourself

Print colors with for...of

const colors = ["red", "blue", "green"];
for (const color of ____) {
  console.log(color);
}

Show answer

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

What is n on the first iteration?
```
const nums = [10, 20, 30];
for (const n of nums) {
  console.log(n);
}
```
- 10
- 0
- 1
- nums
Show answer

10 — Correct. for...of gives the first value on the first iteration; here 10.
Match each loop type with its behavior

for...of

gives values
forEach

runs a callback
for (classic)

gives the index

Next lesson: Searching with indexOf

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies