JavaScript for…of Loop

Introduction

JavaScript for…of loop iterates over an object's values rather than their keys. With the use of a loop, you can directly access the items as opposed to an index reference.

It is a modern iteration statement which was introduced in ECMAScript 2015(ES6). It works for iterable objects such as arrays, strings, maps, sets, and more.

JavaScript for…of loop is a better choice for traversing items of iterables compared to traditional for or for…in loop, especially when we have break or continue statements.

Syntax of JavaScript for…of Loop

The syntax of for…of loop is as follows:

iterable: An iterable is an object such as an array, set, string, etc.

variable: It is an item in the iterable.

JavaScript for…of with Arrays

JavaScript for…of loop can be used to iterate over an array.

Output:

Ani
Affi
Rex

Explanation

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

JavaScript for…of with Strings

In JavaScript, you can use for…of loop to iterate over string values.

Output:

T
p
o
i
n
t

JavaScript for…of with Maps

You can also iterate through the Map elements with the use of JavaScript for…of Loop.

Output:

name- Ash
age- 21

JavaScript for…of with Sets

You can also iterate over sets of elements using JavaScript for…of loop.

Output:

11
22
33
44
55

For Loop within a for…of Loop

In this approach, a for loop is nested within a for…of loop. The for…of loop iterates over iterable objects like arrays, and the inner for loop can perform additional iterations for each element.

Syntax

The syntax of for loop within a for…of loop is as follows:

Output:

Value: 1
  Value plus 1: 2
  Value plus 2: 3
  Value plus 3: 4
Value: 2
  Value plus 1: 3
  Value plus 2: 4
  Value plus 3: 5
Value: 3
  Value plus 1: 4
  Value plus 2: 5
  Value plus 3: 6

Output:

Multiplication Table of 2:
  2 x 1 = 2
  2 x 2 = 4
  2 x 3 = 6
Multiplication Table of 3:
  3 x 1 = 3
  3 x 2 = 6
  3 x 3 = 9
Multiplication Table of 4:
  4 x 1 = 4
  4 x 2 = 8
  4 x 3 = 12

Features of for…of Loop in JavaScript

Simplicity

JavaScript for…of loop provides a clean and straightforward syntax for iterating over elements, which reduces the likelihood of errors and makes the code easier to read and maintain.

Versatility

In JavaScript, the for…of loop can iterate over any iterable object, such as arrays, strings, sets, and even custom iterable objects, which offers better flexibility in handling various data structures.

Direct Access to Elements

Unlike forEach(), which requires a callback function, the for…of loop gives direct access to elements within the loop's body, which allows for simpler code constructs and immediate action on each element.

Control Flow

In JavaScript, for…of loops can be stopped prematurely with the use of break, continue or return when used inside a function; unlike forEach(), it provides better control over the iteration process.

Difference between for…of and for…in