for…in and for…of Loops in JavaScript

JavaScript provides two special loops for working with collections:

• for…in ? used to loop over keys or indexes

• for…of ? used to loop over values

These loops make it easier to work with:

• Arrays

• Objects

• Strings

• Sets

• Maps

You already learned the basics earlier.

In this chapter, we will examine in greater depth when to use each one.

1. for…in Loop

The for…in loop is used to loop over the keys of an object.

Syntax:

for (let key in object) {
    // code
}

Example 1: Loop Through Object Properties

let student = {
    name: "Aman",
    age: 21,
    course: "BCA"
};

for (let key in student) {
    console.log(key, ":", student[key]);
}

Output:

name : Amanage : 21course : BCA

Example 2: Loop Through Array Indexes (Not Recommended)

let colors = ["red", "blue", "green"];

for (let index in colors) {
    console.log(index, colors[index]);
}

Output:

0 red
1 blue
2 green

Even though it works, for…of is better for arrays.

When to Use for…in?

Use it when:

• You want keys

• You are working with objects

• You need property names

2. for…of Loop

The for…of loop is used to loop over values in:

• Arrays

• Strings

• Sets

• Maps

Syntax:

for (let value of iterable) {
    // code
}

Example 1: Loop Through Array Values

let fruits = ["apple", "mango", "banana"];

for (let fruit of fruits) {
    console.log(fruit);
}

Output:

apple
mango
banana

Example 2: Loop Through a String

let word = "JS";

for (let ch of word) {
    console.log(ch);
}

Output:

J
S

Example 3: Loop Through a Set

let items = new Set(["pen", "book", "pen"]);

for (let item of items) {
    console.log(item);
}

Output:

pen
book

Example 4: Loop Through a Map

let prices = new Map([
    ["apple", 50],
    ["mango", 60]
]);

for (let entry of prices) {
    console.log(entry);
}

Output:

["apple", 50]
["mango", 60]

When to Use for…of?

Use it when you want to loop through values, not keys.

for…in vs for…of (Easy Comparison)

Real-Life Example: Student Marks (for…of)

let marks = [85, 72, 90];

for (let m of marks) {
    console.log("Mark:", m);
}

Output:

Mark: 85Mark: 72Mark: 90

Real-Life Example: Product Details (for…in)

let product = {
    title: "Laptop",
    price: 50000,
    brand: "HP"
};

for (let key in product) {
    console.log(key + ":", product[key]);
}

Mixed Example: Array of Objects

let students = [
    { name: "Aman", age: 20 },
    { name: "Riya", age: 22 },
    { name: "Karan", age: 19 }
];

for (let s of students) {
    for (let key in s) {
        console.log(key + ":", s[key]);
    }
}

Output:

name: Amanage: 20name: Riyaage: 22name: Karanage: 19

Common Mistakes Beginners Make

1. Using for…in for arrays (should use for…of)

2. Trying to use for…of directly on objects

3. Confusing keys and values

4. Modifying array length while looping

5. Forgetting that for…in returns strings (indexes as strings)

Example Program (Complete)

let cities = ["Delhi", "Mumbai", "Pune"];

// using for...offor (let city of cities) {
    console.log("City:", city);
}

// using for...infor (let index in cities) {
    console.log("Index:", index);
}

Output:

City: DelhiCity: MumbaiCity: PuneIndex: 0Index: 1Index: 2

Practice Tasks (Do It Yourself)

1. Loop through an object of 5 properties using for…in.

2. Loop through an array of 5 numbers using for…of.

3. Loop through a string using for…of.

4. Loop through an array of objects and print all values.

5. Use for…in to count total keys in an object.