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,

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,

Output

c
o
d
e

for...of with Sets

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

Output

1
2
3

for...of with Maps

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

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,

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,

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.