Why for...in Loops Can Break Your JavaScript Arrays and Safer Alternatives

In JavaScript development, the for...in loop is a common syntax structure, but it has many potential issues when iterating arrays, which can cause unexpected bugs and performance problems.

The nature of the for…in loop

The for...in loop is designed to iterate over object properties, not specifically for arrays. It traverses all enumerable properties, including:

Array indexes

Custom properties

Prototype‑chain properties

Main issues

1. Unordered iteration

The for...in loop does not guarantee a specific order when iterating array elements, which contradicts the ordered nature of arrays:

const arr = [10, 20, 30];
for (let i in arr) {
  console.log(i, arr[i]); // Output order may not be 0,1,2
}

2. Iterating non‑element properties

If you add custom properties to an array, for...in will also iterate over those properties:

const arr = [10, 20, 30];
arr.customProp = "hello";

for (let i in arr) {
  console.log(i, arr[i]); // Will output "customProp" "hello"
}

3. Prototype‑pollution issue

Modifying Array.prototype causes for...in to enumerate the newly added properties:

Better alternatives

1. Classic for loop

The most traditional and reliable way:

2. for…of loop

ES6 introduced syntax specifically for iterating iterable objects:

3. forEach method

The array’s built‑in iteration method:

4. map, filter, reduce, etc.

Choose more specialized array methods according to specific needs:

When can you use for…in?

The for...in loop is very useful for iterating ordinary object properties:

const person = {name: "张三", age: 30, job: "开发者"};
for (const key in person) {
  console.log(key, person[key]);
}