The for...in loop is the conventional way of listing the properties of an object in JavaScript. This article will guide you in understanding for...in loop.

The syntax of the for...in loop is:

for(let variableName in object){
    //execute code
}

From the above syntax, each property of the object is assigned a variableName that will be used within the block scope.

Let's take a better example:

const profile = {
    name: "Ciroma Adekunle",
    age: 18
}

for (let prop in profile){
    console.log(`${prop}: ${profile[prop]}`)
}

The profile object is iterated and each property is assigned to prop. With that we are able to log to the console not just the properties (keys) but also their values.

Output:

name: Ciroma Adekunle

age: 18

In Array

Although possible, it is not advisable to use a for...in loop in an array for iteration. A simple for loop or forEach is recommended instead for arrays.

For instance:

let items = [5, 10, 15, 20];
// add a value to the sixth element
items[5] = 30

for(let i = 0; i < items.length; i++) {
    console.log(`${i}: ${items[i]}`)
}

The output will be:

0: 5

1: 10

2: 15

3: 20

4: undefined

5: 30

When we use the for...in loop:

let items = [5, 10, 15, 20];
// add a value to the sixth element
items[5] = 30

for(const item in items) {
    console.log(`${item}: ${items[item]}`)
}

The output will be:

0: 5

1: 10

2: 15

3: 20

5: 30

You will notice that for...in loop ignores the undefined element. This affects the order of the array elements.

In Object inheritance

When you iterate the properties of an object that inherits from another object, the inherited properties are listed. For example:

const furniture = {
    chair: 'one'
};

const house = Object.create(furniture);
house.room = 3;


for(const prop in house) {
    console.log(prop);
}

The output:

room

chair

We can also list just the property of the house object using the hasOwnProperty() object method

for(const prop in house) {
    if(house.hasOwnProperty(prop)) {
        console.log(prop);
    }
}

The output:

room

Summary

• The for...in loop is used to list the properties of an object.

• Using for...in loop to iterate an array is not advisable, as it affects the order of the elements.

• for...in loop also returns the properties of any inherited object. The hasOwnProperty()method lists only the properties of an object.