Javascript Iterate Object Key Value In 5 Different Ways

A typical issue faced by programmers is looping over an enumerable dataset like object. In this article, we are going to look at 5 different methods of how Javascript iterate object key value.

Table Of Contents

1. Loop through javascript object
   1. Using for...in loop
   2. Using Object.keys()
   3. Using Object.values
   4. Using Object.entries()
   5. Using Object.getOwnPropertyNames()
2. Conclusion

Loop through javascript object

You must have already looped through an array in many different ways like using for loop, forEach, map, etc. But when you use this method to loop through an object, you will get an error.

const user = {
  name: 'John',
  age: 30,
  city: 'New York',
  married: true
};

// this will throw error
user.forEach((prop) => {
  console.log(prop);
});

The above code throws a TypeError.

To loop through an object most commonly used method is for...in the loop. Apart from that, we are also going to look at the following methods to iterate an object that is new in ES6.

1. for...in loop
2. Object.keys()
3. Object.values()
4. Object.entries()
5. Object.getOwnPropertyNames()

1. Using for...in loop

The for...in the loop is commonly used to loop through an object. It is used to loop through all the enumerable properties of an object.

The for...in loop defines a variable and assigns it to each enumerable property of an object.

Syntax:

for (prop in object) {
  // do something
}

Here in each iteration, the object property is assigned to the prop variable.

const user = {
  name: 'John',
  age: 30,
  city: 'New York',
  married: true
};

// looping through object
for (let prop in user) {
  console.log(`${prop}: ${user[prop]}`);
}

You can see the above code iterates over the object and prints the property name and its value.

Iterating Own Property

One problem with the for...in loop is that it iterates over all the enumerable properties of an object including inherited ones. But if you want to iterate over only the own properties of an object, you can use Object.hasOwnProperty() method.

const user = {
  name: 'John',
  age: 30,
  city: 'New York',
  married: true
};

// looping through object
for (let prop in user) {
  if(user.hasOwnProperty(prop)) {
    console.log(`${prop}: ${user[prop]}`);
  }
}

2. Using Object.keys()

The Object.keys() method was introduced in ES6 and it made it easier to iterate over an object.

The Object.keys() method returns an array of all property names of any given object. After getting the array you can use any loop to iterate over it.

Object.keys() take object as {'a': 1, 'b': 2, 'c': 3} and convert it to ['a', 'b', 'c'].

Syntax:

Object.keys(obj)

Here obj is the object that you want to iterate over.

const user = {
  name: 'John',
  age: 30,
  city: 'New York',
  married: true
};

// getting keys of object
const keys = Object.keys(user);
console.log(keys);

// Using for loop
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  console.log(`${key}: ${user[key]}`);
}

In the above example, we have used for loop to iterate over the keys but you can use any loop that can iterate over an array.

3. Using Object.values()

The Object.values() method is very much like the Object.keys() method but instead of returning an array of property names, it returns an array of property values.

You get direct access to the property values of an object using the Object.values() method.

Object.values() take object as {'a': 1, 'b': 2, 'c': 3} and convert it to [1, 2, 3].

Syntax:

Object.values(obj)

Here is an example that returns an array of property values of an object.

const user = {
  name: 'John',
  age: 30,
  city: 'New York',
  married: true
};

// getting values of object
const values = Object.values(user);
console.log(values);

// now simply loop over the array to get value
values.forEach((value) => {
  console.log(value);
});

The order of the property value is the same as defined in the object.

4. Using Object.entries()

The Object.entries() method is used to iterate over an object and returns an array of arrays. Each array inside the array contains a property name and its value.

You can think it as a combination of Object.keys() and Object.values() methods.

Object.entries() take object as {'a': 1, 'b': 2, 'c': 3} and convert it to [[a, 1], [b, 2], [c, 3]].

Syntax:

Object.entries(obj)

Here is an example that returns an array of arrays of property names and values of an object.

const user = {
  name: 'John',
  age: 30,
  city: 'New York',
  married: true
};

// getting entries of object
const entries = Object.entries(user);
console.log(entries);

// looping through entries
entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

5. Using Object.getOwnPropertyNames()

The Object.getOwnPropertyNames() method is used to iterate over an object and returns an array of all property names of an object. It does not include inherited properties.

Syntax:

Object.getOwnPropertyNames(obj)

Let's see an example.

const user = {
  name: 'John',
  age: 30,
  city: 'New York',
  married: true
};

// getting property names of object
const propertyNames = Object.getOwnPropertyNames(user);
console.log(propertyNames);

// looping through property names
propertyNames.forEach((propertyName) => {
  console.log(`${propertyName}: ${user[propertyName]}`);
});

Conclusion

We have seen 5 different ways of how javascript iterate object key, value. For summarising and quick solution use for...in loop for iteration over and object in javascript.