Why for...in Is Bad for Array Iteration in JavaScript

By the end of this page, you will understand that for...in iterates over property names rather than reliably iterating over array elements. You will know when to use for...of, classic for loops, and array methods such as forEach, map, and filter instead.

for...in is designed to enumerate an object's enumerable property keys. An array is also an object in JavaScript, so for...in can list more than its numeric indexes.

For example, an array normally has keys such as "0", "1", and "2". However, it can also have custom properties, and it may inherit enumerable properties from Array.prototype or another prototype. A for...in loop may include those properties too.

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

for (const key in colors) {
  console.log(key);
}

// "0"
// "1"
// "2"

Notice that the loop variable contains keys as strings, not the values "red", "green", and "blue".

This matters because array iteration usually means processing values in order. for...in does not communicate that intent well, can include unexpected properties, and should not be relied on for array ordering. Use an array-focused construct instead.

Think of an array as a numbered shelf of books:

• for...of says: “Give me each book on the shelf.”
• A classic for loop says: “Visit shelf position 0, then 1, then 2.”
• for...in says: “Tell me every label attached to this shelf object.”

The labels include the expected position labels ("0", "1") but might also include extra labels someone attached later. That is useful when inspecting an object's properties, but it is not a safe way to read the books themselves.

Use for...of when you need array values.

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

// apple
// banana
// orange

Use entries() when you need both the index and value.

const fruits = ["apple", "banana", "orange"];

for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}

// 0: apple
// 1: banana
// 2: orange

A for...in loop produces property names instead:

const fruits = [, , ];

 ( key  fruits) {
  .(key, fruits[key]);
}

Consider this code:

const tasks = ["email client", "write report"];
tasks.priority = "high";

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

Step by step:

1. tasks is an array with elements at indexes 0 and 1.
2. tasks.priority = "high" adds a normal object property to the array.
3. for...in looks for enumerable property keys on tasks.
4. It can visit the keys "0", "1", and "priority".
5. The output can therefore be:

0 email client
1 write report
priority high

The priority property is not an array element, but for...in treats it as another enumerable property. By contrast, only iterates the array's iterable values:

Choose the loop based on the work you need to do:

• Render a list in a command-line script: use for...of to process each filename, user, or product.
• Validate API data: use for...of to inspect every item in an array returned by an API.
• Create transformed data: use map() to turn product prices into formatted display strings.
• Remove unwanted records: use filter() to keep only active users.
• Stop after finding a match: use for...of with break, or find() when you only need the matching value.
• Inspect object configuration: use for...in only when you intentionally want an object's enumerable property keys, usually with an own-property check.

const prices = [12, 25, 8];
const formattedPrices = prices.map(price => `$${price.toFixed(2)}`);

console.log(formattedPrices);
// ["$12.00", "$25.00", "$8.00"]

In production code, developers make the operation's intent clear.

Process every value

for (const user of users) {
  sendWelcomeEmail(user);
}

Transform without changing the original array

const userNames = users.map(user => user.name);

Filter invalid values before continuing

const validOrders = orders.filter(order => order.total > 0);

Use a guard clause in a loop

for (const order of orders) {
  if (!order.isPaid) {
    continue;
  }

  shipOrder(order);
}

Iterate object keys intentionally

For plain objects, Object.keys() makes it clear that you want own keys only:

Treating for...in values as array elements

for...in returns keys, so this code logs indexes rather than names:

const names = ["Ada", "Lin"];

for (const name in names) {
  console.log(name);
}

// 0
// 1

Use for...of:

for (const name of names) {
  console.log(name);
}

Assuming only indexes will be visited

const items = ["pen", "notebook"];
items.category = "stationery";

for (const key in items) {
  console.log(key);
}

The loop can include "category". Do not use when processing array elements.

// Preferred: values
for (const value of array) {
  // use value
}

// Preferred: index and value
for (const [index, value] of array.entries()) {
  // use index and value
}

// Preferred: controlled index loop
for (let index = 0; index < array.length; index++) {
  // use array[index]
}

// Transform values into a new array
const result = array.map(value => transform(value));

// Keep matching values
const result = array.filter(value => matches(value));

// Iterate a plain object's own keys
for (const key of Object.keys(object)) {
  // use object[key]
}

Rules to remember:

• Do not use for...in for normal array iteration.
• for...in yields property names, not values.

Why does for...in return strings for array indexes?

JavaScript object property names are strings (apart from symbols). Array indexes are represented as property keys, so for...in produces values such as "0" and "1".

Does for...in always fail with arrays?

No. It often appears to work for a simple array with no extra properties. The problem is that it has the wrong semantics and can produce unexpected keys as code changes.

Should I use for...of or forEach() for arrays?

Use for...of when you may need break, continue, or await. Use forEach() for a short callback that performs a side effect for every item. Use map() when creating a new array.

Can for...of give me the index too?

Yes. Use array.entries():

 ( [index, value]  array.()) {
  .(index, value);
}

• JavaScript arrays — Arrays are objects with indexed elements and array-specific iteration behavior.
• JavaScript objects — for...in is about object property keys, so understanding objects explains its behavior.
• for...of loops — The usual readable choice for iterating values from arrays and other iterables.
• Classic for loops — Useful when you need direct control over an index.
• Array.prototype.forEach — A callback-based way to perform side effects for each array item.
• Array.prototype.map — Creates a new array by transforming every item.
• Array.prototype.filter — Creates a new array containing only matching items.
• Object.keys, Object.values, and Object.entries — Explicit ways to iterate own properties of plain objects.
• JavaScript prototypes — Inherited enumerable properties are one reason for...in can be surprising.