What is the use of the for...in loop in JavaScript?

In JavaScript, the for...in loop is used to iterate over the properties of an object. It is a powerful tool that allows you to perform operations on all of an object’s properties in a single loop.

The for...in loop can be used to loop through both own and inherited properties of an object.

The syntax for the for...in loop in JavaScript is as follows:

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

Here, variable is a new variable that will be declared for each iteration of the loop, and object is the object whose properties you want to loop through.

Let’s look at some examples to understand how the for...in loop works.

Example 1: Looping through an object’s own properties

In this example, we will create an object person with some properties and use the for...in loop to loop through its own properties.

// Creating an object
let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York",
};

// Looping through the object's own properties
for (let prop in person) {
  console.log(prop + ": " + person[prop]);
}

In the above code, we create an object person with four properties: firstName, lastName, age, and city. We then use the for...in loop to loop through the object’s properties and log each property name and value to the console.

The output of the above code will be:

firstName: John
lastName: Doe
age: 30
city: New York

Example 2: Looping through an object’s inherited properties

// Creating a prototype object
let personProto = {
  gender: "Male",
};

// Creating an object that inherits from personProto
let person = Object.create(personProto, {
  firstName: {
    value: "John",
    enumerable: true,
  },
  lastName: {
    value: "Doe",
    enumerable: true,
  },
  age: {
    value: 30,
    enumerable: true,
  },
  city: {
    value: "New York",
    enumerable: true,
  },
});

// Creating a new object that inherits from both person and personProto
let employee = Object.create(person, {
  jobTitle: {
    value: "Developer",
    enumerable: true,
  },
  salary: {
    value: 50000,
    enumerable: true,
  },
});

// Looping through all properties of employee
for (let prop in employee) {
  console.log(prop + ": " + employee[prop]);
}

In the above code, we first create a prototype object personProto with one property: gender. We then create an object person that inherits from personProto using the Object.create() method. We add four properties to person: firstName, lastName, age, and city.

Next, we create a new object employee that inherits from both person and personProto using the Object.create() method. We add two properties to employee: jobTitle and salary.

Finally, we use the for...in loop to loop through all the properties of employee, including its own properties (jobTitle and salary) and inherited properties (firstName, lastName, age, city, and gender). We log each property name and value to the console.

The output of the above code will be:

jobTitle: Developer
salary: 50000
firstName: John
lastName: Doe
age: 30
city: New York
gender: Male

Example 3: Skipping inherited properties using the hasOwnProperty() method

In some cases, you may only want to loop through an object’s own properties and skip any inherited properties. In such cases, you can use the hasOwnProperty() method to check if a property belongs to the object or to its prototype chain.

// Creating a prototype object
let personProto = {
  gender: "Male",
};

// Creating an object that inherits from personProto
let person = Object.create(personProto, {
  firstName: {
    value: "John",
    enumerable: true,
  },
  lastName: {
    value: "Doe",
    enumerable: true,
  },
  age: {
    value: 30,
    enumerable: true,
  },
  city: {
    value: "New York",
    enumerable: true,
  },
});

// Looping through the object's own properties only
for (let prop in person) {
  if (person.hasOwnProperty(prop)) {
    console.log(prop + ": " + person[prop]);
  }
}

In the above code, we create a prototype object personProto with one property: gender. We then create an object person that inherits from personProto using the Object.create() method. We add four properties to person: firstName, lastName, age, and city.

We then use the for...in loop to loop through all the properties of person. However, we use the hasOwnProperty() method to check if each property belongs to the object or to its prototype chain. If a property belongs to the object itself, we log its name and value to the console.

The output of the above code will be:

firstName: John
lastName: Doe
age: 30
city: New York

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.