Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Loops

JavaScript for of Loop

Written by Published

The JavaScript for of loop is used to loop through the values of an array, a string, and other collections.

The for of loop gives you one value at a time.

You do not need an index or a counter, which makes it shorter and easier to read than a normal for loop.

Example

Example

javascript

let fruits = ["Apple", "Banana", "Mango"];

for (let fruit of fruits) {
  console.log(fruit);
}

In this example, the loop prints each fruit name.

The output is Apple, Banana and Mango.

What is the for of Loop?

The for of loop repeats once for every value in a collection.

On each turn, the variable holds the value itself.

This is the main difference from for in: for in gives you the property name or index, while for of gives you the value.

Syntax

Syntax

javascript

for (let value of collection) {
  // code to run
}

The word value is just a variable name. You can call it anything you like.

for of with Arrays

The most common use of for of is looping through an array.

Example

Example

javascript

let numbers = [10, 20, 30, 40];
let total = 0;

for (let number of numbers) {
  total = total + number;
}

console.log(total);

Here, the loop adds every number together and prints 100.

for of with Strings

A string can also be looped through one character at a time.

Example

Example

javascript

let name = "John";

for (let letter of name) {
  console.log(letter);
}

Here, each letter is printed on its own line.

Getting the Index with entries

The for of loop does not give you an index.

If you need one, use entries() together with destructuring.

Example

Example

javascript

let fruits = ["Apple", "Banana", "Mango"];

for (let [index, fruit] of fruits.entries()) {
  console.log(index + ": " + fruit);
}

Here, both the index and the value are available inside the loop.

for of with break and continue

You can use break and continue inside a for of loop.

Example

Example

javascript

let numbers = [5, 12, 8, 130, 44];

for (let number of numbers) {
  if (number < 10) {
    continue;
  }

  if (number > 100) {
    break;
  }

  console.log(number);
}

Here, numbers below 10 are skipped and the loop stops at the first number above 100.

The output is 12 and 8.

for of with a Set

A Set stores only unique values, and for of reads them in order.

Example

Example

javascript

let colours = new Set(["Red", "Green", "Red", "Blue"]);

for (let colour of colours) {
  console.log(colour);
}

Here, the repeated value is stored only once, so Red is printed one time.

for of with a Map

A Map stores pairs, so each turn gives you a key and a value.

Example

Example

javascript

let ages = new Map([
  ["John", 30],
  ["Mary", 25]
]);

for (let [name, age] of ages) {
  console.log(name + " is " + age);
}

Here, the pair is unpacked into two variables on each turn.

for of vs for in

These two loops look similar but do different jobs.

Use for of for values, and for in for property names.

Example

Example

javascript

let fruits = ["Apple", "Banana"];

for (let index in fruits) {
  console.log(index);
}

for (let fruit of fruits) {
  console.log(fruit);
}

The first loop prints 0 and 1, which are the indexes.

The second loop prints Apple and Banana, which are the values.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript for of Loop</title>
</head>
<body>

  <h1>JavaScript for of Loop</h1>

  <p id="result"></p>

  <script>
    let fruits = ["Apple", "Banana", "Mango", "Orange"];

    let result = "";

    for (let fruit of fruits) {
      result += fruit + "<br>";
    }

    document.getElementById("result").innerHTML = result;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try changing the array:

Add another fruit to the list and run it again to see the new line appear.

Important Points

  • The for of loop gives you the value on each turn.
  • It works with arrays, strings, Set and Map.
  • No counter or index is needed, which keeps the code short.
  • Use entries() when you also need the index.
  • for of reads values, while for in reads property names.

Conclusion

The JavaScript for of loop is used to read the values in a collection.

It is shorter and easier to read than a normal for loop when you do not need an index.

Understanding for of helps you work with arrays and write cleaner JavaScript code.

PreviousJavaScript for in LoopNextJavaScript Nested Loops