JavaScript for in Loop: Complete Guide

The for...in loop iterates over the enumerable property keys of an object. It is the oldest dedicated tool for walking through object properties and has been part of JavaScript since the beginning.

Unlike for...of, which gives you values, for...in gives you keys. This makes it the right loop for inspecting or processing the properties of a plain object.

Basic for...in Syntax

javascript

for (const key in object) {
  // use key to access object[key]
}

Each iteration assigns the next enumerable property name (as a string) to the loop variable. You then use bracket notation to access the corresponding value.

javascript

const user = {
  name: "Alice",
  age: 30,
  city: "Seattle",
};
 
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Output (order may vary):

text

name: Alice
age: 30
city: Seattle

Each key is a string. The loop variable key holds "name", then "age", then "city". Bracket notation user[key] retrieves the value for each key.

The Prototype Chain Problem

for...in does not stop at the object's own properties. It walks up the prototype chain and includes inherited enumerable properties:

javascript

const parent = { inherited: "from parent" };
const child = Object.create(parent);
child.own = "from child";
 
for (const key in child) {
  console.log(key);
}
// Prints: own, inherited

The inherited property comes from the parent object, not from child itself. In most cases you only want the object's own properties.

Filtering with hasOwnProperty()

Use hasOwnProperty() to include only the object's direct properties:

javascript

for (const key in child) {
  if (Object.hasOwn(child, key)) {
    console.log(`${key}: ${child[key]}`);
  }
}
// Prints only: own: from child

Object.hasOwn(obj, key) is the modern replacement for obj.hasOwnProperty(key). It returns true only for properties that belong directly to the object, not to any prototype.

The diagram shows why inherited properties appear: after exhausting the object's own keys, for...in checks the prototype, then the prototype's prototype, and so on. Without hasOwnProperty(), properties from every level of the chain enter your loop.

for...in vs Object.keys()

Object.keys() returns an array of an object's own enumerable property names. It is often a cleaner choice:

javascript

const car = { make: "Toyota", model: "Corolla", year: 2024 };
 
// for...in with hasOwnProperty
for (const key in car) {
  if (Object.hasOwn(car, key)) {
    console.log(key, car[key]);
  }
}
 
// Object.keys: simpler, no prototype worries
for (const key of Object.keys(car)) {
  console.log(key, car[key]);
}

Both produce the same output for plain objects, but Object.keys() with for...of is shorter and cannot accidentally include inherited properties. Modern ECMAScript defines for...in traversal order (integer keys in ascending order, then string keys in creation order), and Object.keys() follows the same order.

Why Not Use for...in on Arrays

Arrays are objects, so for...in technically works on them. But it iterates over all enumerable properties, not just numeric indices:

javascript

const arr = ["a", "b", "c"];
arr.custom = "extra";
 
for (const key in arr) {
  console.log(key, arr[key]);
}

Output:

text

0 a
1 b
2 c
custom extra

The custom property "extra" is included alongside the numeric indices. If the Array prototype has been extended (rare in modern code, but possible with polyfills), those additions also appear.

javascript

// RIGHT: use for...of for array values
for (const value of arr) {
  console.log(value); // a, b, c
}
 
// RIGHT: use classic for for array indices
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]); // 0 a, 1 b, 2 c
}

When for...in Is the Right Tool

Despite its caveats, for...in has valid use cases:

For most modern code, Object.keys() combined with for...of is the safer default. For a full guide on object iteration, see looping through objects in JavaScript.

for...in vs for...of Side by Side

javascript

const colors = ["red", "green", "blue"];
 
// for...in: gives indices as strings
for (const index in colors) {
  console.log(typeof index, index); // string 0, string 1, string 2
}
 
// for...of: gives values directly
for (const color of colors) {
  console.log(color); // red, green, blue
}

The difference is fundamental: for...in answers "what are the keys?" and for...of answers "what are the values?" For arrays, you almost always want the values. For objects, you usually want the keys to look up the values.

For more on array iteration and when to pick each loop type, see the guide comparing for, for...of, and forEach and the for...of loop guide.