Iterable Loops (for…of and for…in)

JavaScript provides two special loops that make it easier to work with arrays, objects, and strings:

• for…of ? used for values

• for…in ? used for keys or indexes

These loops help you write clean and readable code without worrying about index management. They are highly useful in modern JavaScript and frequently appear in interviews and real-world projects.

Why Do We Need Iterable Loops?

Iterating (looping) over arrays and objects is a very common task.
Without these loops, you must write something like:

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Iterable loops simplify this process.

1. for…of Loop

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

• Arrays

• Strings

• Maps

• Sets

It gives you each element directly.

Syntax:

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

Example 1: Loop through an array

let numbers = [10, 20, 30, 40];

for (let num of numbers) {
    console.log(num);
}

Output:

10
20
30
40

This loop automatically gives you each value—no need for indexes.

Example 2: Loop through a string

let name = "Aman";

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

Output:

A
m
a
n

Each character is printed individually.

Example 3: Loop through a Set

let items = new Set(["Pen", "Book", "Pen"]);

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

Output:

Pen
Book

Sets remove duplicates automatically.

2. for…in Loop

The for…in loop is used to loop through keys or indexes of:

• Objects

• Arrays (not recommended but possible)

It provides the key (index), not the value.

Syntax:

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

Example 1: Loop through an object

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

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

Output:

name : Riyaage : 21course : BCA

• key ? property name

• student[key] ? property value

Example 2: Loop through an array (not recommended)

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

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

Output:

0 red
1 blue
2 green

Although it works, for…of is better for arrays.

for…of vs for…in (Easy Comparison)

Real-Life Example Using for…of

Loop through student marks:

let marks = [45, 55, 60, 70];

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

Output:

Mark: 45Mark: 55Mark: 60Mark: 70

Real-Life Example Using for…in

Display product details:

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

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

Output:

title: Laptopprice: 50000brand: HP

Example Program With Both Loops

let student = {
    name: "Karan",
    age: 22,
    course: "JavaScript"
};

let subjects = ["HTML", "CSS", "JS"];

// Loop through objectfor (let key in student) {
    console.log(key, ":", student[key]);
}

// Loop through arrayfor (let sub of subjects) {
    console.log("Subject:", sub);
}

Output:

name : Karanage : 22course : JavaScriptSubject: HTMLSubject: CSSSubject: JS

Common Mistakes Beginners Make

1. Using for…in for arrays (not recommended).

2. Confusing values with indexes.

3. Trying to use for…of on objects (not allowed directly).

4. Forgetting the difference between key and value.

Practice Tasks (Do It Yourself)

1. Loop through a string using for…of and print each character.

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

3. Loop through a student object using for…in.

4. Create an object with 4 subjects and print marks using for…in.

5. Use for…of to print numbers from an array that are greater than 50.