For in/ For of Loops in JavaScript | JavaScript for Web Development - Software Development PDF Download

Introduction

When working with JavaScript, loops play a crucial role in repeating a set of instructions. Two common types of loops used in JavaScript are the for-in and for-of loops. In this article, we will explore these loops and understand their differences, use cases, and how to implement them with simple examples.

The For-In Loop

The for-in loop is used to iterate over the properties of an object. It traverses through the enumerable properties of an object, including inherited properties. Let's take a look at its syntax and a couple of examples:

Syntax:

for (variable in object) {

  // code to be executed

}

Example 1: Iterating over Object Properties

const person = {

  name: 'John',

  age: 30,

  city: 'New York'

};

for (let key in person) {

  console.log(key + ':', person[key]);

}

Output

name: John

age: 30

city: New York

Explanation: In the above example, the for-in loop iterates over the properties (name, age, and city) of the person object. The key variable represents each property name, which we use to access the corresponding values (person[key]) and display them.

Example 2: Iterating over Array Indices

const fruits = ['apple', 'banana', 'orange'];

for (let index in fruits) {

  console.log(index, fruits[index]);

}

Output

0 apple

1 banana

2 orange

Explanation: In this example, the for-in loop iterates over the indices (0, 1, and 2) of the fruits array. The index variable represents each index value, which we use to access and display the corresponding array elements (fruits[index]).

The For-of Loop

The for-of loop is used to iterate over iterable objects such as arrays, strings, maps, sets, etc. It provides a simpler syntax and directly iterates over the values of the object. Let's explore its syntax and a couple of examples:

Syntax:

for (variable of iterable) {

  // code to be executed

}

Example 1: Iterating over Array Elements

const numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {

  console.log(number);

}

Output

1

2

3

4

5

Explanation: In the above example, the for-of loop iterates over each element in the numbers array. The number variable represents each element's value, which we directly print using console.log().

Example 2: Iterating over String Characters

const message = 'Hello';

for (let char of message) {

  console.log(char);

}

Output

H

e

l

l

o

Explanation: Here, the for-of loop iterates over each character in the message string. The char variable represents each character, which we print using console.log().

Key Differences Between For-In and For-of Loops

• for-in loop is used to iterate over the properties of an object, while for-of loop is used to iterate over iterable objects like arrays, strings, etc.
• for-in loop iterates over the enumerable properties, including inherited ones, while for-of loop directly iterates over the values of the iterable object.
• for-in loop is commonly used for objects, while for-of loop is commonly used for arrays and strings.

Sample Problems and Solutions

Problem 1: Write a for-in loop to display all the keys and values of the following object:

const car = {

  brand: 'Toyota',

  model: 'Camry',

  year: 2022

};

Solution

for (let key in car) {

  console.log(key + ':', car[key]);

}

Output

brand: Toyota

model: Camry

year: 2022

Problem 2: Write a for-of loop to calculate the sum of all numbers in the following array:

const numbers = [1, 2, 3, 4, 5];

Solution:

let sum = 0;

for (let number of numbers) {

  sum += number;

}

console.log('Sum:', sum);

Output

Sum: 15

Conclusion

In this article, we covered the for-in and for-of loops in JavaScript. We learned that the for-in loop is used to iterate over object properties, while the for-of loop is used to iterate over iterable objects like arrays and strings. Understanding these loops and their differences will help you write more efficient and effective code. Practice implementing them with different examples to become comfortable with their usage.