JavaScript for…of Loop

In this chapter, we will learn about the for...of loop in JavaScript. The for...of loop is a modern way to iterate over iterable objects such as arrays, strings, maps, sets, and more. We will cover:

• What is the for...of Loop?
• Syntax of the for...of Loop
• Iterating Over Arrays
• Iterating Over Strings
• Iterating Over Maps
• Iterating Over Sets
• Comparing for...of and for...in
• Simple Programs using for...of

What is the for…of Loop?

The for...of loop is a new iteration statement introduced in ES6 (ECMAScript 2015) that allows you to loop through the values of an iterable object. It provides a simple and concise way to iterate over elements.

Syntax of the for…of Loop

Syntax

for (variable of iterable) { // Code to be executed for each element } 

• variable: A variable to hold the current value from the iterable object.
• iterable: An object that is iterable (e.g., array, string, map, set).

Iterating Over Arrays

The for...of loop is commonly used to iterate over arrays.

Example

let numbers = [10, 20, 30, 40, 50]; for (let number of numbers) { console.log(number); } 

Output:

10 20 30 40 50 

Iterating Over Strings

You can use the for...of loop to iterate over each character in a string.

Example

let text = "Namaste"; for (let char of text) { console.log(char); } 

Output:

N a m a s t e 

Iterating Over Maps

The for...of loop can be used to iterate over the entries, keys, or values of a map.

Example

let map = new Map([ ["firstName", "Amit"], ["lastName", "Kumar"], ["age", 25] ]); for (let [key, value] of map) { console.log(`${key}: ${value}`); } 

Output:

firstName: Amit lastName: Kumar age: 25 

Iterating Over Sets

The for...of loop can be used to iterate over the values of a set.

Example

let set = new Set(["apple", "banana", "mango"]); for (let value of set) { console.log(value); } 

Output:

apple banana mango 

Comparing for…of and for…in

The for...of loop iterates over the values of an iterable object, while the for...in loop iterates over the keys or properties of an object.

Example using for...of

let fruits = ["apple", "banana", "mango"]; for (let fruit of fruits) { console.log(fruit); } 

Output:

apple banana mango 

Example using for...in

let fruits = ["apple", "banana", "mango"]; for (let index in fruits) { console.log(index); // Iterates over the indexes console.log(fruits[index]); // Iterates over the values } 

Output:

0 apple 1 banana 2 mango 

Simple Programs using for…of

Program 1: Calculate the Sum of an Array

let numbers = [10, 20, 30, 40, 50]; let sum = 0; for (let number of numbers) { sum += number; } console.log("Sum:", sum); 

Output:

Sum: 150 

Program 2: Convert a String to Uppercase

let text = "namaste"; let upperText = ""; for (let char of text) { upperText += char.toUpperCase(); } console.log("Uppercase:", upperText); 

Output:

Uppercase: NAMASTE 

Conclusion

In this chapter, you learned about the for...of loop in JavaScript, including its syntax and how to use it to iterate over arrays, strings, maps, and sets. We also compared the for...of loop with the for...in loop and provided various use cases with simple programs to demonstrate the usage of the for...of loop. Understanding the for...of loop is essential for writing clean and concise iteration code in JavaScript.