Javascript for...of Loop

Introduction

The JavaScript for…of loop allows iteration over the values of an object, rather than its keys. By utilizing this loop, you can directly retrieve the items instead of referencing them through an index.

This is a contemporary iteration statement that was introduced in ECMAScript 2015 (ES6). It is applicable to iterable entities, including arrays, strings, maps, sets, and various other data structures.

The JavaScript for…of loop presents a more effective option for iterating over elements of iterable objects when contrasted with the conventional for or for…in loops, particularly in scenarios where break or continue statements are utilized.

Syntax of JavaScript for…of Loop

The syntax of for…of loop is as follows:

for(variable of iterable){

    //code to execute

}

iterable: An iterable refers to an object like an array, set, string, or similar constructs.

variable: It is an item in the iterable.

JavaScript for…of with Arrays

The for…of loop in JavaScript is a construct that allows you to traverse through the elements of an array.

Example

const students = ['Ani', 'Affi', 'Rex'];

for ( let element of students ) {

    console.log(element);

}

Output:

Ani

Affi

Rex

Explanation

In the preceding example, the for…of loop is employed to traverse the students array object and present all of its values.

JavaScript for…of with Strings

In JavaScript, the for…of loop can be utilized to traverse through string values.

Example

const string = 'Example';

for( let i of string){

  console.log(i);

}

Output:

T

p

o

i

n

t

JavaScript for…of with Maps

Additionally, you can traverse the elements within a Map by utilizing the JavaScript for…of loop.

Example

let map = new Map();

map.set('name', 'Ash');

map.set('age', '21');

for (let [key, value] of map) {

    console.log(key + '- ' + value);

}

Output:

name- Ash

age- 21

JavaScript for…of with Sets

In JavaScript, you can also traverse collections of elements by utilizing the for…of loop.

Example

let s = new Set([11, 22, 33, 44, 55]);

for (let value of s) {

    console.log(value);

}

Output:

11

22

33

44

55

For Loop within a for…of Loop

In this method, a for loop is embedded inside a for…of loop. The for…of loop is designed to traverse iterable entities such as arrays, while the inner for loop is capable of executing further iterations for every individual element.

Syntax

The structure of a for loop nested inside a for…of loop is outlined below:

for (let value of arr) {

    for (let i = 0; i < limit; i++) {

        // Code to execute

    }

}

Example

const arr = [1, 2, 3];



for (let value of arr) {

    console.log(`Value: ${value}`);

    for (let i = 1; i <= 3; i++) {

        console.log(`  Value plus ${i}: ${value + i}`);

    }

}

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

Example

for (const num of [2, 3, 4]) { // Outer loop iterates over base numbers

    console.log(`Multiplication Table of ${num}:`);

    

    for (let i = 1; i <= 3; i++) { // Inner loop iterates over multipliers

        console.log(`  ${num} x ${i} = ${num * i}`);

    }

}

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

The for…of loop in JavaScript offers a clear and simple syntax for traversing elements, which minimizes the chances of mistakes and enhances the readability and maintainability of the code.

Versatility

In JavaScript, the for…of loop enables iteration over any object that is iterable, including arrays, strings, sets, and even user-defined iterable objects. This feature provides enhanced flexibility when working with different data structures.

Direct Access to Elements

In contrast to forEach, which mandates the use of a callback function, the for…of loop provides direct access to the elements in the loop's body. This feature facilitates more straightforward code constructs and enables immediate operations on each individual element.

Control Flow

In JavaScript, it is possible to terminate for…of loops before their completion by utilizing break, continue, or return statements when these loops are incorporated within a function. This offers a greater degree of control over the iteration mechanism, in contrast to the forEach method.

Difference between for…of and for…in