for...in

A for...in loop is best used when you need to loop over the properties of an object. This loop will iterate over all enumerable properties of an object, including inherited properties and non-numeric properties.

An inherited property is a property that is inherited from the object’s prototype chain. A non-numeric property is a property that is not a number or a string that can be converted to a number.

Here is the basic syntax of a for...in loop:

for (variable in object) {
  // code block to be executed
}

The variable in the example represents the current property of the object that is being looped over.

Let’s take a look at a few examples so you can better understand how the for...in loop works.

In this first example we have a fruit object and we want to loop over each property and log the value to the console.

const fruit = {
  name: 'apple',
  color: 'red',
  price: 0.99
};
 
for (const prop in fruit) {
  console.log(fruit[prop]);
}
//apple
//red
//0.99

The prop variable represents the current property of the object. fruit[prop] is used to access the value of each property.

For the first iteration, prop will be name. For the second iteration, prop will be color, and so on.

The results logged to the console will be apple, red, and 0.99.

In this second example, we have a nested object and we want to loop over each property and log the value to the console.

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};
 
for (const prop in person) {
  console.log(person[prop]);
}
//Jhon
//30
//{street: '123 Main St', city: 'Anytown', state: 'CA'}

The address property is an object itself. The for...in loop will also loop over the properties of the person object and log the entire address object to the console.

Here is what the result will look like in the console:

John
30
{ street: '123 Main St', city: 'Anytown', state: 'CA' }

If you want to loop over the properties of the address object, you can nest another for...in loop inside the first one.

function isObject(obj) {
  return typeof obj === 'object' && !Array.isArray(obj) && obj !== null;
}
 
for (const prop in person) {
  if (isObject(person[prop])) {
    for (const nestedProp in person[prop]) {
      console.log(person[prop][nestedProp]);
    }
  } else {
    console.log(person[prop]);
  }
}
//John
//30
//123 Main St
//Anytown
//CA

In this example have a custom function isObject that checks if the value is an object.

The Array.isArray method is used to check if the value is an array. By placing the logical NOT operator (!) in front of the method, we are checking if the value is not an array.

The reason why we can’t just use typeof equals 'object' is because arrays are also considered objects in JavaScript. We want to exclude arrays from the check.

Also, due to a historical bug in JavaScript, typeof null returns 'object'. So we want to also exclude null values from the check.

If the condition is true, we nest another for...in loop that will loop over the properties of the nested object and log the value to the console.

The nestedProp variable represents the current property of the nested object.

Here is what the modified result will look like in the console:

"John"
30
"123 Main St"
"Anytown"
"CA"

A for...in loop is useful when you need to loop over the properties of an object.

It is not recommended to use a for...in loop to loop over the elements of an array. Instead, use a for...of loop or other array methods like forEach, map, filter, and reduce, which you will learn about in future lessons.