JavaScript for…in Loop

Introduction

for…in loop, which is specifically designed to iterate over the properties (keys) of an object.

Understanding the for…in loop is essential when working with objects, APIs, JSON data, and dynamic structures in JavaScript.

In this guide, you’ll learn everything about the JavaScript for…in loop, including syntax, usage, real-life examples, common mistakes, and interview questions.

What is a for…in Loop?

The for…in loop is used to iterate over the enumerable properties (keys) of an object.

Note:  It gives you access to each key in the object.

📖
Best Practices:
  • Use for…in for objects only.
  • Avoid using with arrays.
  • Use hasOwnProperty().

Syntax of for…in Loop


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

Basic Example: Access Key from the Object


let user = {
   name: "John",
   age: 35,
   city: "Delhi"
};

for (let key in user) {
   console.log(key);
}

Output:

name
age
city

Access Value from the Object


let user = {
   name: "John",
   age: 35,
   city: "Delhi"
};

for (let key in user) {
   console.log(user[key]);
}

Output:

John
35
Delhi

How for…in Loop Works

There are 4 steps

  1. Picks each key from the object
  2. Assigns it to a variable (key)
  3. Executes a block of code
  4. Continues until all keys are covered

Real-Life Examples

You will see some Real-Life Examples

1. User Profile


let profile = {
   name: "John",
   age: 35,
   profession: "Manager"
};

for (let key in profile) {
   console.log(`${key}: ${profile[key]}`);
}

2. API Data Handling


let data = {
   id: 1,
   title: "Post",
   status: "published"
};

for (let key in data) {
   console.log(key, data[key]);
}

for…in with Nested Objects


let user = {
   name: "John",
   address: {
       city: "Delhi",
       zip: 12345
   }
};

for (let key in user) {
   if (typeof user[key] === "object") {
       for (let innerKey in user[key]) {
           console.log(innerKey, user[key][innerKey]);
       }
   } else {
       console.log(key, user[key]);
   }
}

Output:

name John
city Delhi
zip 12345

Difference between for…in vs for…of

Feature for…in for…of
Iterates Keys / Indexes Values
Used For Objects Arrays / Iterables
Returns Property names Element values
Example Syntax 
for(let key in obj){
   console.log(key);
}

for(let value of arr){
   console.log(value);
}
Example Output name, age John, 25

When to Use for…in Loop

There are many reasons to use for…in a loop

  1. Working with objects
  2. Iterating keys
  3. Handling JSON data
  4. Dynamic property access

When NOT to Use for…in Loop

You should avoid when

  1. Working with arrays
  2. Needing values directly
  3. Performance-critical loops

JavaScript for in loop – Interview Questions

Q 1: What is for...in a loop?
Ans: Iterates over object properties.
Q 2: Returns key or value?
Ans: Key.
Q 3: Is it suitable for arrays?
Ans: Not recommended.
Q 4: Does it include inherited properties?
Ans: Yes.
Q 5: Use case?
Ans: Iterating objects.

JavaScript for in loop – Objective Questions (MCQs)

Q1. for...in is used to iterate over ______.





Q2. for...in is best suited for ______.





Q3. for...in iterates over ______ properties.





Q4. Which loop should NOT be preferred for arrays?





Q5. for...in also iterates over ______ properties.





Conclusion

The JavaScript for…in loop is a powerful tool for iterating over object properties. It is especially useful when working with dynamic data structures, APIs, and JSON objects.

However, it should be used carefully, especially when dealing with arrays or inherited properties.

By understanding how and when to use the for…in loop, you can write more efficient and maintainable JavaScript code.