JavaScript for… of Loop

In this tutorial, you learn out about JavaScript for…of loop with the assistance of examples.

What is the For…of Loop?

The for…of statement makes a loop that iterates over iterable objects. For…of loop was introduced in ES6 with being an option in contrast to both for..in and forEach() and supports the new iteration protocol. For..of allows you to loop over data structures that are iterable, for example, Arrays, strings, Maps, Sets, and more.

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

• JavaScript for loop
• JavaScript for…in loop
• JavaScript for…of loop

The for…of loop was presented in the later forms of JavaScript ES6.

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

---

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 each component 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 instance,

// array
const students = ['Salman', 'Sara', 'Sohail'];

// using for...of
for ( let element of students ) {

    // display the values
    console.log(element);
}

Output

Salman
Sara
Sohail

In the above program, the for…of loop is used to iterate over the students array object and show every one of its qualities.

---

for…of with Strings

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

// 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 instance,

// 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', 'Salman');
map.set('age', '27');

// looping through Map
for (let [key, value] of map) {
    console.log(key + '- ' + value);
}

Output

name- Salman
age- 27

---

User Defined Iterators

You can make an iterator manually and use the for…of loop to iterate through the iterators. For instance,

// 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 actualize an iterator in a simpler manner. At that point, you can iterate through the generators using the for…of loop. For instance,

// 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

for…of	for…in
The for…of loop is used to iterate through the values of an iterable.	The for…in loop is used to iterate through the keys of an object.
The for…of loop cannot be used to iterate over an object.	You can use for…in to iterate over an iterable such arrays and strings but you should avoid using for…in for iterables.

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

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS ES6