Overview of the for...in Statement

The for...in statement is a loop that iterates over the property names (keys) of plain objects, such as those created with object literals {} or new Object().

In JavaScript, the term "object" covers a wide range of types—including arrays, functions, Maps, and Sets. However, the for...in statement is typically used to loop through plain objects and is generally not suitable for arrays or other iterable objects.

In this article, we'll explore how the for...in loop works, along with its unique characteristics and important caveats to keep in mind when using it.

Using the for...in Statement

The for...in statement is used to iterate over the properties of a plain object, including inherited enumerable properties.

In this section, we will cover the basic syntax and behavior of the for...in loop, including how the variable is assigned during iteration and how to access the property values.

Basic Syntax and Behavior

The basic syntax of the for...in statement is as follows:

JavaScript 
for (variable in object) {
    // code to execute
}
  • variable: The variable that stores the property name on each iteration.
  • object: The object whose properties are being iterated.

During each iteration, the for...in statement loops through the enumerable properties of the given object, assigning the property name to the variable. This allows you to access the corresponding property value.

Value Assigned to the Variable During Iteration

When using the for...in statement to iterate over an object's properties, the variable is assigned the property name on each iteration. You can then use this property name to retrieve the property's value.

JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
} // Object defined using an object literal

for (let key in person) {
    console.log(key); // Logs the property name
}
The console output will be:

Accessing the Property Values

Since the variable assigned during iteration holds the property name, you can use it to access the property values via bracket notation: object[variable].

JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
} // Object defined using an object literal

for (let key in person) {
    console.log(key + ": " + person[key]); // Logs the property name and value
}

In the example above, person[key] retrieves the value of the property named key in the person object. As a result, both the property name and its value are logged on each iteration.

The console output will be:

In the next section, we will explore the key characteristics of the for...in statement. In the next section, we will explore the key characteristics of the for...in statement.

Key Characteristics of the for...in Statement

The for...in statement provides a way to iterate over an object's properties, but there are several key characteristics you should be aware of. Below, we'll take a closer look at the main features of the for...in statement.

Iterates Over Properties in the Prototype Chain

The for...in loop iterates not only over the object's own properties but also over properties inherited through the prototype chain. This behavior is common in objects that use inheritance.

If you want to iterate only over the object's own properties, you should use the hasOwnProperty method to filter them.

JavaScript 
const parent = {
    parentProp: "I am from parent"
} // Object defined using an object literal

const child = Object.create(parent);
child.childProp = "I am from child";

for (let key in child) {
    console.log(key); // Logs: parentProp, childProp
}

for (let key in child) {
    if (child.hasOwnProperty(key)) {
        console.log(key); // Logs: childProp only
    }
}

Iterates Only Over Enumerable Properties

The for...in loop iterates only over enumerable properties of an object.
By default, an object's properties are enumerable. However, if you use the Object.defineProperty() method to set the property’s enumerable attribute to false, that property will be skipped by the for...in loop.

JavaScript 
const obj = {
    enumerableProp: "I will be enumerated",
} // Object defined using an object literal

Object.defineProperty(obj, "nonEnumerableProp", {
    value: "I will not be enumerated",
    enumerable: false
});

for (let key in obj) {
    console.log(key); // Logs: enumerableProp only
}

Iteration Order Is Not Guaranteed

When using the for...in statement, the order in which properties are iterated is not guaranteed. If property order matters, consider using alternative approaches. Since ES6, data structures like Map and Set maintain insertion order and are safer options. For arrays (which are also objects), it is recommended to use methods like forEach() instead.

Taking these key characteristics into account is important when iterating over and working with object properties using the for...in statement. In the next section, we will discuss some important precautions to keep in mind when using for...in.

Important Characteristics and Precautions When Using the for...in Statement

When using the for...in statement, there are several important characteristics and precautions to keep in mind. Understanding these can help you avoid potential issues during iteration and handle object properties more reliably.

Iterating Over Properties in the Prototype Chain and Using hasOwnProperty

The for...in loop iterates over properties found in the prototype chain. This can sometimes lead to unintended behavior. Therefore, to iterate only over an object's own properties, you should use the hasOwnProperty method to filter them.

JavaScript 
for (let key in object) {
    if (object.hasOwnProperty(key)) {
        // Perform operations on the object's own properties
    }
}

Precautions When Modifying Property Values During Iteration

It is possible to modify property values while iterating over an object using the for...in loop. However, this may cause unexpected behavior. If you need to change property values, it is recommended to handle this either by other means or after the iteration is complete.

Controlling enumerable Properties with Object.defineProperty()

When you define a property using the Object.defineProperty() method, setting its enumerable attribute to false makes the property non-enumerable, so it will be skipped during for...in iteration.

JavaScript 
Object.defineProperty(object, "nonEnumerableProperty", {
    value: "This property is not enumerable",
    enumerable: false
});

Handling null or undefined Objects

If you attempt to iterate over an object that is null or undefined using the for...in loop, an error will occur. Therefore, always verify that the object is valid before iterating.

JavaScript 
const obj = null;

for (let key in obj) {
    // This block will not execute
}

Considering these characteristics and precautions when using the for...in statement is essential for iterating over and managing object properties safely and effectively. In the next section, we will explore alternatives to the for...in loop.

Alternatives to the for...in Statement

In addition to the for...in statement, there are several alternative ways to iterate over an object's properties. These methods offer more intuitive and safer iteration patterns, and can help make your code clearer and more predictable.

Below, we'll explore how to use Object.keys(), Object.values(), Object.entries(), for...of, and array forEach() as alternatives to for...in.

Benefits of Using Object.keys(), Object.values(), and Object.entries()

The Object.keys(), Object.values(), and Object.entries() methods provide convenient ways to iterate over objects and access their properties. Each method returns an array that allows for easier and more controlled iteration.

  • Object.keys(obj): Returns an array of the object's property names.
  • Object.values(obj): Returns an array of the object's property values.
  • Object.entries(obj): Returns an array of [property name, value] pairs.
JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
}

const keys = Object.keys(person);
const values = Object.values(person);
const entries = Object.entries(person);

console.log(keys);    // ['name', 'age', 'occupation']
console.log(values);  // ['John', 30, 'Developer']
console.log(entries); // [['name', 'John'], ['age', 30], ['occupation', 'Developer']]

Using for...of and forEach() as Alternatives

You can also use the for...of loop and the forEach() method to iterate over an object's properties, once they have been converted to arrays.

Using the for...of Loop

The for...of loop is used to iterate over iterable objects. Since plain objects are not iterable by default, this loop is typically used with arrays or other iterable values derived from an object.

JavaScript 
const values = Object.values(person);

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

Using the forEach() Method

The forEach() method runs a callback function for each element in an array. To use it for object properties, you first need to convert the object into an array using Object.entries().

JavaScript 
const person = {
    name: "John",
    age: 30,
    occupation: "Developer"
};

const entries = Object.entries(person);

entries.forEach(([key, value]) => {
    console.log(key + ": " + value);
});

By using these alternatives, you can avoid the potential pitfalls of the for...in loop and iterate over object properties in a safer and more predictable manner. Choosing the right method for your use case can lead to clearer and more maintainable code.

The Importance of Iterating Over Objects with Care

The for...in statement is a useful tool for iterating over the properties of an object. However, it comes with several caveats: it traverses properties along the prototype chain, only includes enumerable properties, and does not guarantee iteration order. Understanding these characteristics is crucial to avoiding unexpected behavior when working with object properties.

Throughout this article, w'’ve also looked at alternative methods such as Object.keys(), Object.values(), Object.entries(), for...of, and forEach(), which offer safer and more intuitive ways to iterate over objects.

Objects are a core concept in JavaScript development.
When iterating over object properties, you may be performing tasks such as data processing, transformation, dynamic behavior, or retrieving values dynamically. In all these cases, it is important to follow best practices and be aware of potential issues. Failing to do so can result in subtle bugs or even security vulnerabilities due to unexpected behavior—such as unintended traversal of inherited properties or unreliable property order.

Ultimately, working with objects effectively requires both caution and understanding.
By practicing and becoming familiar with different iteration techniques, you can write more reliable and maintainable JavaScript code.

Specifications

Specification for the for...in Statement
Specification
for...in ECMAScript Language Specification
#sec-for-in-and-for-of-statements

Browser compatibility

Browser Compatibility for the for...in Statement
Statement
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
for...in 1 12 1 1

See also