How to use ES6 for...of loop in JavaScript?

ES6 introduced a new loop construct, for...of loop. The best thing about for/of loop is that it provides an easy way to loop through iterable objects such as array, string, Map, Set, arguments objects, custom iterables and array-like structures (NodeList).

The for...of loop has the following syntax:

for(variable of iterable){
	//loop body
}

The variable is declared using let, const or var keyword. of is a keyword.

The for/of loop runs once for each element present in the iterable. And in each iteration, the current processing element is assigned to the variable.

Note: Objects are not iterable, so you cannot use for/of loop with objects. But there are other ways around that will enable you to use for/of loop with object. Visit How to use for...of loop to iterate over an object in JavaScript to learn more.

Loop through an array using for...of loop

Apart from for loop and forEach() method, you can use for...of loop to iterate an array. The for/of loop iterates through all the array elements in order of their index position.

let numbers = [11, 12, 13, 14, 15, 16];
for(let number of numbers){
  console.log(number);
}

Output

11
12
13
14
15
16

You can also calculate the sum of all the elements of an array very easily.

let naturalNumbers = [1, 2, 3, 4, 5, 6], total=0;
for(let number of naturalNumbers){
  total += number;
}
console.log(`The sum of numbers is ${total}`);

Output

The sum of numbers is 21

Instead of the let keyword, you can use the const keyword if you don't want to change the variable of the for/of loop.

let naturalNumbers = [1, 2, 3, 4, 5, 6], total=0;
for(const number of naturalNumbers){
  total += number;
}
console.log(`The sum of numbers is ${total}`);

Loop through an array of objects using for...of loop

let shoppingCart = [
  {pdtName:'Amazon Echo Dot 4th Gen', price:49.99},
  {pdtName:'Amazon Smart Plug', price:24.99},
  {pdtName:'Amazon Fire TV Stick', price:29.99}
];
let totalPrice = 0;
for(let {price} of shoppingCart){
  totalPrice += price;
}
console.log(`Total price is ${totalPrice}`);

Output

Total price is 104.97

In this example, with the help of object destructuring, the price key from the shoppingCart object is extracted. Then, the total price of all the products in a shopping cart is calculated.

Loop through a string using for...of loop

In JavaScript, strings are iterable, and because of which you can use for/of loop to iterate through strings. Strings are iterated character-by-character.

let str = "JavaScript";
for(let s of str){
  console.log(s);
}

Output

J
a
v
a
S
c
r
i
p
t

Iterate through Map using for/of loop

ES6's Map object is iterable. When you iterate a Map using for/of loop, the current processing element is returned as an array. The first element of that array is the key and the second element is key's value.

let productPrices = new Map();
productPrices.set('Milk', 1.09);
productPrices.set('Bread', 0.49);
productPrices.set('Butter', 3.30);
for(let price of productPrices){
  console.log(price);
}

Output

["Milk", 1.09]
["Bread", 0.49]
["Butter", 3.3]

You can use array destructuring as a variable.

let productPrices = new Map();
productPrices.set('Milk', 1.09);
productPrices.set('Bread', 0.49);
productPrices.set('Butter', 3.30);
for(let [product, price] of productPrices){
  console.log(price);
}

Output

1.09
0.49
3.3

Iterate through the Set using for...of loop

In JavaScript, the Set object is also iterable. So, when you iterate through the Set, the loop executes once for each element present in the Set.

let primeNumbers = new Set([2, 3, 5, 7, 11]);
for(let prime of primeNumbers){
  console.log(prime);
}

Output

2
3
5
7
11