JavaScript for... of Loop

In JavaScript, there are three ways we can use a for loop.

• JavaScript for loop
• JavaScript for...in loop
• JavaScript for...of loop

The for...of loop was introduced in the later versions of JavaScript ES6.

The for..of loop in JavaScript allows you to iterate over iterable objects (arrays, sets, maps, strings etc).

JavaScript for...of loop

The syntax of the for...of loop is:

 for (element of iterable) { // body of for...of }

Here,

• iterable - an iterable object (array, set, strings, etc).
• element - items in the iterable

In plain English, you can read the above code as: for every element in the iterable, run the body of the loop.

for...of with Arrays

The for..of loop can be used to iterate over an array. For example,

 // array const students = ['John', 'Sara', 'Jack']; // using for...of for ( let element of students ) { // display the values console.log(element); }

Output

 John Sara Jack

In the above program, the for...of loop is used to iterate over the students array object and display all its values.

for...of with Strings

You can use for...of loop to iterate over string values. For example,

 // string const string = 'code'; // using for...of loop for (let i of string) { console.log(i); }

Output

 c o d e

for...of with Sets

You can iterate through Set elements using the for...of loop. For example,

 // define Set const set = new Set([1, 2, 3]); // looping through Set for (let i of set) { console.log(i); }

Output

 1 2 3

for...of with Maps

You can iterate through Map elements using the for...of loop. For example,

 // define Map let map = new Map(); // inserting elements map.set('name', 'Jack'); map.set('age', '27'); // looping through Map for (let [key, value] of map) { console.log(key + '- ' + value); }

Output

 name- Jack age- 27

User Defined Iterators

You can create an iterator manually and use the for...of loop to iterate through the iterators. For example,

 // creating iterable object const iterableObj = { // iterator method [Symbol.iterator]() { let step = 0; return { next() { step++; if (step === 1) { return { value: '1', done: false}; } else if (step === 2) { return { value: '2', done: false}; } else if (step === 3) { return { value: '3', done: false}; } return { value: '', done: true }; } } } } // iterating using for...of for (const i of iterableObj) { console.log(i); }

Output

 1 2 3

for...of with Generators

Since generators are iterables, you can implement an iterator in an easier way. Then you can iterate through the generators using the for...of loop. For example,

 // generator function function* generatorFunc() { yield 10; yield 20; yield 30; } const obj = generatorFunc(); // iteration through generator for (let value of obj) { console.log(value); }

Output

 10 20 30

for...of Vs for...in

The for...of loop was introduced in ES6. Some browsers may not support its use. To learn more, visit JavaScript for...of Support.