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.
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}`);
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.
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
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
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