JavaScript for…in Loop Explained: Syntax, Use Cases, and Best Practices

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction｜What Problems Can the for…in Statement Solve?

Purpose of This Article

• Basic syntax and usage of the JavaScript for…in loop
• Cautions when using it with arrays
• Differences compared to other loop constructs (for…of and forEach)
• Common errors and how to fix them

What You’ll Learn

• How to efficiently process object properties and array elements
• Cautions and safe usage of the for…in statement
• Practical code examples and performance comparisons

2. What is the JavaScript for…in Statement?【Basic Explanation】

Basic Syntax

for (variable in object) {
  // Repeated processing
}

• variable: Stores the current property name (key).
• object: The target object you want to iterate through.

Usage Example: Enumerating Object Properties

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

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

name: Taro
age: 25
city: Tokyo

Caution: Order of Enumerated Properties

Summary of Features

1. Easily retrieve object keys: Useful when dynamically accessing property names.
2. Only enumerable properties are targeted: Non-enumerable properties (enumerable: false) are excluded.
3. Prototype-inherited properties are also enumerated: This can cause issues, which will be explained in the next section.

3. Arrays and the for…in Statement｜Key Points to Watch

Basic Behavior with Arrays

const fruits = ["Apple", "Banana", "Orange"];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

0 Apple  
1 Banana  
2 Orange

Caution 1: Prototype Properties May Be Enumerated

Array.prototype.newMethod = function () {
  return "New Method";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

Caution 2: Order Is Not Guaranteed

const data = [];
data[10] = "Apple";
data[1] = "Banana";
data[5] = "Orange";

for (const index in data) {
  console.log(index, data[index]);
}

1 Banana  
5 Orange  
10 Apple

Caution 3: Indexes Are Treated as Strings

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

Summary

• The for…in statement is better suited for objects than arrays.
• For order and numeric index handling, for…of or a traditional for loop is recommended.

4. Differences Between for…in and for…of【Comparison Table】

Syntax Comparison

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // Retrieves keys
}

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Retrieves values
}

Comparison Table

Practical Example｜Array Handling

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // Output: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // Output: 'a', 'b', 'c'
}

Summary

• for…in: Best for handling object keys.
• for…of: Best for arrays and iterable objects.

5. Practical Use: Applications and Best Practices of the for…in Statement

1. Example 1｜Filtering Object Properties

const user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

{ name: 'Tanaka', age: 30, email: 'tanaka@example.com' }

2. Example 2｜Processing Nested Objects

const data = {
  user: {
    name: "Sato",
    info: {
      age: 28,
      city: "Osaka"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

printNested(data);

name: Sato
age: 28
city: Osaka

3. Best Practice｜Excluding Prototype Properties

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

a: 1
b: 2

Summary

• We introduced appropriate use cases for filtering and handling nested objects.
• Use hasOwnProperty() to prevent unintended prototype inheritance from being enumerated.

6. Common Errors and Solutions with for…in【Beginner-Friendly】

1. Error Example 1｜Prototype Properties Are Enumerated

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  console.log(key, obj[key]);
}

a 1
b 2
c 3

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. Error Example 2｜Using for…in with Arrays

const arr = [10, 20, 30];
Array.prototype.extra = "Additional Data";

for (const index in arr) {
  console.log(index, arr[index]);
}

0 10
1 20
2 30
extra undefined

for (const value of arr) {
  console.log(value);
}

3. Error Example 3｜Handling Undefined Values

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

for (const key in obj) {
  const value = obj[key] ?? "Default Value";
  console.log(key, value);
}

Summary

• Prototype Property Issues: Use hasOwnProperty().
• Array Handling: Prefer for…of or forEach instead of for…in.
• Undefined Values: Assign default values with the nullish coalescing operator (??).

7. Performance Testing and Alternatives to for…in

1. Performance Comparison

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. Example Comparison Result

for...in: 0.015ms
Object.keys: 0.005ms

3. Recommended Alternatives

• Object Handling: Prefer Object.keys() for better performance and safety.
• Array Handling: Use for…of or forEach for faster and more reliable iteration.

Summary

• The for…in statement is convenient, but choose the most appropriate loop construct considering performance and safety.

8. Conclusion｜Understanding the for…in Statement and Next Steps

1. Key Takeaways

1. Basic Syntax and Usage of for…in:

• Used to iterate over object property names.
• Specialized for object keys, not arrays.

1. Cautions When Using with Arrays:

• Order is not guaranteed, and prototype chain properties may be included.
• For arrays, use for…of or forEach() instead.

1. Differences Between for…in and for…of:

• for…in: Iterates property names (keys).
• for…of: Iterates actual values of arrays or iterable objects.

1. Practical Applications and Best Practices:

• Handling nested objects with recursion.
• Excluding prototype inheritance with hasOwnProperty().
• Improving performance and safety with Object.keys() or Object.entries().

1. Performance Optimization:

• Object.keys() + forEach() is recommended for order guarantees and efficiency, making it a safer alternative to for…in.

2. Answers to Common Questions

• A: It’s suitable for enumerating object properties, but for arrays or performance-critical tasks, for…of or Object.keys() is safer and more efficient.

• A: Yes. By specification, inherited prototype properties are also included. Use hasOwnProperty() to avoid this issue.

• Objects: Use for…in or Object.keys().
• Arrays: Use for…of or forEach().

3. Next Steps｜What to Learn Next

1. Iterables and Iterable Objects:

• Data structures such as Map, Set, WeakMap, WeakSet and the loops to handle them.

1. Higher-Order Functions for Data Handling:

• Practical usage of map(), filter(), reduce().

1. Advanced Object and Array Techniques:

• Using Object.values() and Object.entries() for efficient data processing.

1. Modern JavaScript Features:

• ES6+ features such as the spread operator and destructuring for cleaner code.

1. Asynchronous Programming with Promise/Async/Await:

• Apply loops in real-time processing such as data fetching and dynamic object handling.

4. Final Thoughts｜Mastering JavaScript Loops

• for…in is ideal for enumerating object properties, but for arrays or performance-focused tasks, other approaches should be used.
• Always follow best practices and safety measures to avoid errors and unexpected behavior in your code.