How to Loop Through an Object in JavaScript

JavaScript objects are collections of key-value pairs. Sometimes, you need to loop through these key-value pairs to perform operations. This guide will show you how to loop through an object in JavaScript using different methods.

What is an Object in JavaScript?

An object in JavaScript is a non-primitive data type that stores key-value pairs. For example:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

In this example, name, age, and city are keys, and 'John', 30, and 'New York' are the corresponding values.

Methods to Loop Through an Object

1. Using for...in Loop

The for...in loop is used to iterate over the enumerable properties of an object.

Syntax:

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

Example:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

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

Output:

name: John
age: 30
city: New York

2. Using Object.keys()

The Object.keys() method returns an array of the object’s own enumerable property names. You can then use a for...of loop or forEach() to iterate over the keys.

Example with for...of:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const keys = Object.keys(person);

for (let key of keys) {
  console.log(key + ': ' + person[key]);
}

Example with forEach():

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Object.keys(person).forEach(key => {
  console.log(key + ': ' + person[key]);
});

3. Using Object.values()

The Object.values() method returns an array of the object’s own enumerable property values. You can use a for...of loop or forEach() to iterate over the values.

Example with for...of:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const values = Object.values(person);

for (let value of values) {
  console.log(value);
}

Example with forEach():

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Object.values(person).forEach(value => {
  console.log(value);
});

4. Using Object.entries()

The Object.entries() method returns an array of the object’s own enumerable property [key, value] pairs. You can use a for...of loop or forEach() to iterate over the entries.

Example with for...of:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const entries = Object.entries(person);

for (let [key, value] of entries) {
  console.log(key + ': ' + value);
}

Example with forEach():

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Object.entries(person).forEach(([key, value]) => {
  console.log(key + ': ' + value);
});

Checking for Own Properties

When using the for...in loop, it iterates over all enumerable properties, including those inherited from the prototype chain. To check if a property is an own property, use the hasOwnProperty() method.

Example:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ': ' + person[key]);
  }
}

Looping Through Nested Objects

If an object contains nested objects, you can loop through them recursively.

Example:

const nestedObject = {
  person: {
    name: 'John',
    age: 30
  },
  city: 'New York'
};

function loopThroughObject(obj) {
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      console.log('Nested object:', key);
      loopThroughObject(obj[key]);
    } else {
      console.log(key + ': ' + obj[key]);
    }
  }
}

loopThroughObject(nestedObject);

Output:

Nested object: person
name: John
age: 30
city: New York

Frequently Asked Questions

1. What is the difference between for...in and for...of?

• for...in loops through the keys of an object or the indices of an array.
• for...of loops through the values of an iterable (like arrays, strings, maps, etc.).

2. Should I use for...in or Object.keys()?

• Use for...in if you need to loop through all enumerable properties, including inherited ones.
• Use Object.keys() if you only want to loop through the object’s own enumerable properties.

3. Can I modify the object while looping through it?

Yes, but be careful with for...in and for...of loops. Modifying the object while looping can lead to unexpected behavior.

4. How do I loop through an object in a specific order?

Use Object.keys(), Object.values(), or Object.entries() and sort the resulting array before looping.

5. How do I loop through an object’s methods?

You can check if a property is a function using typeof obj[key] === 'function'.

Example:

const obj = {
  sayHello: () => console.log('Hello'),
  name: 'John'
};

for (let key in obj) {
  if (typeof obj[key] === 'function') {
    console.log('Method:', key);
  }
}

Output:

Method: sayHello