Difference Between for…in and for…of Statements in JavaScript

JavaScript provides multiple ways to iterate over objects and arrays, with for...in and for...of being two popular loop constructs. In this article, we will explore the differences between for...in and for...of, covering their syntax, functionality, and practical applications.

What is for…in?

The for...in loop iterates over the enumerable property keys of an object, including array indices (treated as properties). It is generally used for objects but can also be used for arrays (though not recommended).

What is for…of?

The for...of loop iterates over the values of an iterable object, such as arrays, strings, maps, sets, or custom iterables. It is designed specifically for iterating over data collections.

2. Syntax

for…in Syntax

for (key in object) {
    // Code to execute for each key
}

• key: The property key (string or symbol) for each enumerable property.

for…of Syntax

for (value of iterable) {
    // Code to execute for each value
}

• value: The value of each element in the iterable.

3. Key Differences

Feature	for...in	for...of
Iteration Target	Property keys (enumerable)	Values of an iterable
Best Use Case	Iterating over object properties	Iterating over iterable values
Works with Objects?	Yes	No (throws error unless iterable)
Works with Arrays?	Yes (not recommended)	Yes (preferred for arrays)
Includes Inherited Keys?	Yes	No
Performance	May include extra keys (e.g., prototype properties)	Focuses on values, less overhead

4. for...in Examples

4.1 Iterating Over an Object

The primary use case for for...in is to iterate over object properties.

let user = { 
    name: "Alice", 
    age: 25, 
    city: "New York" 
};

for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}
// Output:
// name: Alice
// age: 25
// city: New York

4.2 Iterating Over an Array

for...in can also be used for arrays, but it iterates over indices (keys), not values.

let arr = [10, 20, 30, 40, 50];

for (let index in arr) {
    console.log("Index:", index, "Value:", arr[index]);
}

5. for...of Examples

5.1 Iterating Over an Array

The for...of loop is ideal for arrays, as it directly iterates over values.

let arr = [10, 20, 30, 40, 50];

for (let item of arr) {
    console.log(item);
}
/* Output:
10
20
30
40
50  */

5.2 Iterating Over a String

for...of works seamlessly with strings, iterating over each character.

let str = "Welcome";

for (let char of str) {
    console.log(char);
}
/* Output:
W
e
l
c
o
m
e */

5.3 Iterating Over a Map

for...of is perfect for iterating over Map objects.

let map = new Map([
    ["name", "Alice"],
    ["age", 25],
    ["city", "New York"]
]);

for (let [key, value] of map) {
    console.log(`${key}: ${value}`);
}
// Output:
// name: Alice
// age: 25
// city: New York

5.4 Iterating Over a Set

With for...of, you can iterate over unique values in a Set.

let set = new Set(["apple", "banana", "cherry"]);

for (let value of set) {
    console.log(value);
}
// Output:
// apple
// banana
// cherry

6. Use Cases

Scenario	Use for...in	Use for...of
Iterating over object properties	✅ Yes	❌ No (throws an error)
Iterating over array values	❌ Avoid (use for...of)	✅ Yes
Iterating over strings	❌ No	✅ Yes
Iterating over maps or sets	❌ No	✅ Yes
Checking inherited properties	✅ Yes	❌ No