How to use for…in loop in JavaScript: Best practices

In JavaScript, the for…in loop is used to iterate over the properties of an object or the indices of an array. It has a similar syntax for both objects and arrays, but there are some differences in how they are used.

for…in loops and objects

When used with an object, the for…in loop iterates over all the enumerable properties of the object, including its prototype chain. Here is the basic syntax for a for…in loop with an object:

for (let property in object) {
  // code to be executed
}

Each iteration of the loop assigns the name of the next enumerable property of the object to the variable property and the corresponding value to the variable object[property].

When iterating over an object, it is a good practice to use the hasOwnProperty() method to check if a property belongs to the object itself or if it has been inherited from its prototype chain. This can prevent unexpected behavior and improve performance:

for (let property in object) {
  if (object.hasOwnProperty(property)) {
    // code to be executed
  }
}

for…in loops and arrays

When used with an array, the for…in loop iterates over the indices of the array, rather than the values themselves. Here is the basic syntax for a for…in loop with an array:

for (let index in array) {
  // code to be executed
}

Each iteration of the loop assigns the next index of the array to the variable index. The corresponding value can be accessed using array[index].

It’s important to know that for…in is not the best way to iterate over arrays in JavaScript, as it can have unexpected behavior with non-integer keys and can iterate over inherited properties. Instead, you can use for…of or some methods like Array.prototype.forEach() to avoid weird outcomes as well as gain better performance.

Examples

Below are some examples that demonstrate some real-world use cases of the for…in loop.

Object iteration

You can use for…in to iterate over the properties of an object, as shown below:

const obj = {
  name: 'Sling Academy',
  type: 'Programming Website',
  age: 10,
};

for (let property in obj) {
  console.log(property + ': ' + obj[property]);
}

Output:

name: Sling Academy
type: Programming Website
age: 10

Object filtering

The for…in loop can be used to filter an object’s properties based on some criteria, like this:

const site = {
  name: 'Sling Academy',
  type: 'Programming Website',
  description: 'Learn to code with Sling Academy',
  age: 10,
};

for (let property in site) {
  if (typeof site[property] === 'number') {
    console.log(property + ': ' + site[property]);
  }
}

Output:

age: 10

Dynamic object creation

You can use for…in to dynamically create an object based on another object or data source (a truly new object will be created instead of just a reference).

Example:

const person = {
  name: 'John Doe',
  email: '[email protected]',
  age: 33,
  job: 'Developer'
};

const personCopy = {};

for (let property in person) {
  personCopy[property] = person[property];
}
personCopy.newProperty = 'New property';

console.log('Copied object:',personCopy);
console.log('Original object:',person);

Output:

Copied object: {
  name: 'John Doe',
  email: '[email protected]',
  age: 33,
  job: 'Developer',
  newProperty: 'New property'
}

Original object: {
  name: 'John Doe',
  email: '[email protected]',
  age: 33,
  job: 'Developer'
}

That’s it. Happy coding!