JavaScript for…in – A Loop for Objects Iterable by Property (Key)

Definition and Usage

The for...in statement is a loop designed for objects iterable by property (key).
Any object iterable by property (key) can be traversed using for...in. In other words, it runs a loop that operates on the values of the properties (keys) retrieved from the object.

An object iterable by property (key) is an object that has enumerable properties (keys). A typical example is plain objects.

Arrays also have enumerable properties (keys). In JavaScript, the property names (keys) of an array are its indices (integers).

Basic Example

The following is an example of traversing a plain object iterable by property (key) using the for...in statement.

When using the for...in statement to iterate over the properties (keys) of an object, the variable in each iteration is assigned the name of the property. This allows you to access the property names.

JavaScript

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

for (let key in person) {
    console.log(key); // Prints the property (key) names
}
// Output: "name" "age" "occupation"

Syntax

variable: The name of the variable that stores the current property (key) during each iteration.
object: The object iterable by property (key) that you want to iterate over.

Features

The for...in statement provides the ability to iterate over an object's properties (keys), but there are several important features to consider. Below, we will take a closer look at the main characteristics of the for...in statement.

Iterating Over an Object's Properties (Keys)

The for...in statement iterates over an object's enumerable property names (keys). In each iteration, the variable receives the property name as a string.

Iteration Order Is Not Guaranteed

The order in which properties (keys) are iterated may vary depending on the engine implementation and is not guaranteed by the specification. While most engines follow the order in which properties were added, you should not assume it is always consistent.

Not Suitable for Array Iteration

It is not recommended to use for...in for iterating arrays where the order of indices matters.

For arrays, it is recommended to use loops like for, for...of, or forEach() that provide consistent iteration order.

Note:
The for...in statement ignores properties whose keys are Symbols.

Accessing an Object's Values Using `for...in`

The for...in statement iterates over an object's enumerable property names (keys), so it does not access the actual property values. To access the values, you need to use the obj[key] syntax.

JavaScript

<code>
const user = {
    name: "John",
    age: 30
};

for (let key in user) {
    console.log(key, ":", user[key]);  
}
/*
    Output:
    "name" : "John"
    "age" : 30
*/

Practical Use

As we have seen from the features of the for...in statement, it provides the ability to iterate over an object's properties (keys), but note that the iteration order is not guaranteed. Therefore, it is not suitable for iterating over arrays.

So, when is it appropriate to use the for...in statement?

The for...in statement is primarily used for debugging purposes, to check which properties (keys) of a plain object have certain values, rather than for processing data through iteration.

Specifications

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

Compatibility