The for..in loop iterates through the properties of an object in JavaScript. It provides a very clean and concise syntax to iterate over enumerable (like object literals, arrays, and strings) and all other kinds of iterable properties.

How for...in Loop Works

for (const key in object) {
    // do something
}

The key is the name of the variable that is assigned a different property name on each iteration. The object is the actual iterable (object literals, array, strings) you are looping over. The block of code inside the loop is executed once for each property.

You can use the key to obtain the value of the property from the object.

Here is an example:

const user = {
    name: 'John Doe',
    email: 'john.doe@example.com',
    age: 25,
    admin: false
};

for (const key in user) {
    console.log(key); // property name
    console.log(user[key]); // property value
}

for...in Loop Examples

Let us have some more examples. The for...in loop below iterates through the properties of an object literal and logs a string of the property names and their values:

const animals = {
    tiger: 'πŸ…',
    cat: '🐱',
    monkey: 'πŸ’',
    horse: '🐴',
    elephant: '🐘'
};


for (const key in animals) {
    console.log(`${key} --> ${animals[key]}`);
}

// tiger --> πŸ…
// cat --> 🐱
// monkey --> πŸ’
// horse --> 🐴
// elephant --> 🐘

You can also use for...in to loop through an array or a string by using their index values:

const str = 'JavaScript Loops';

for (const index in str) {
    console.log(`${str[index]} is at ${index} index.`);
}

// J is at 0 index.
// a is at 1 index.
// v is at 2 index.
// a is at 3 index.
// ...

According to MDN, the for...in loop should not be used to iterate over an array where the index order is important. This loop does not guarantee to return the indexes in the original order. Instead, you should use a simple for loop with a numeric index or for...of loop when iterating over arrays where the order of access is important.

for...in Loop and Prototypes

Objects in JavaScript can have a lot of properties that are inherited from object prototypes. For example, objects created by using Array and Object constructors inherit many properties from Object.prototype and String.prototype. The for...in loop will iterate over all properties of the object itself and those the object inherits from its constructor's prototype.

Let us have an example to understand this inheritance:

function Animal(name, icon) {
    this.name = name;
    this.icon = icon;
};

const cat = new Animal('Cat', '🐱');

Animal.prototype.color = 'White';

for (const prop in cat) {
    console.log(`Aminal ${prop} is ${cat[prop]}.`);
}

// Aminal name is Cat.
// Aminal icon is 🐱.
// Aminal color is White.

The color of the animal is part of the prototype, and not the actual object cat, but is returned anyways. If you are only interested in properties that are attached to the object itself, and not its prototypes, use hasOwnProperty() method to ensure that the key is a property of the actual object:

for (const prop in cat) {
    if (cat.hasOwnProperty(prop)) {
        console.log(`Aminal ${prop} is ${cat[prop]}.`);
    }
}

It is better to always perform hasOwnProperty() check in a for...in loop unless you explicitly want to iterate through properties inherited from object prototypes.

Browser Compatibility

The for...in loop works perfectly in all modern browsers including Internet Explorer 6 and higher.

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. β˜• Buy me a coffee (cost $3)

Need help to start a new Spring Boot or MEAN stack project? I am available for contract work. Hire me to accomplish your business goals with engineering and design. Let’s talk about your project: hi@attacomsian.com.