How to loop through or enumerate the properties of a JavaScript object?

August 13, 2018  /  Leave a response

There are multiple ways to iterate/loop through all the properties in a JavaScript object.

Method 1: for-in loop

var person = {
  name: 'Shravan Kasagoni',
  age: 20,
  isActive: true
};

person.constructor.prototype.printName = function() {
  console.log(this.name);
};

person.constructor.prototype.encKey = 'somevalue';

person.constructor.prototype.printName = function() {
  console.log(this.name);
};

The for-in loop iterates over all enumerable properties of an object.

for (var propertyName in person) {
  console.log(propertyName, person[propertyName]);
}

Result:

name Shravan Kasagoni
age 20
isActive true
printName ƒ () {
  console.log(this.name);
}
encKey somevalue

The for-in loop returns all the enumerable, own and prototype properties of an object.

In the above person object, name, age, isActive are own properties, printName, encKey are prototype properties. We can filter out the prototype properties using hasOwnProperty() method.

for (var propertyName in person) {
  if (person.hasOwnProperty(propertyName)) {
    console.log(propertyName, person[propertyName]);
  }
}

Result:

name Shravan Kasagoni
age 20
isActive true

Method 2: Object.keys()

The Object.keys() method returns all enumerable and own properties of an object as an array.

var propertyNames = Object.keys(person);
console.log(propertyNames);

Result:

["name", "age", "isActive"]

We can use the forEach() method to iterate and print the values in propertyNames.

propertyNames.forEach(function(propertyName) {
  console.log(propertyName, person[propertyName]);
});

The Object.keys() method introduced in ES5.

Method 3: Object.values()

The Object.values() method returns the values of all enumerable and own properties of an object as an array.

var propertyValues = Object.values(person);
console.log(propertyValues);

Result:

["Shravan Kasagoni", 20, true]

The Object.values() method introduced in ES6.

Method 4: Object.entries()

The Object.entries() method returns the list of key, value pairs of all enumerable and own properties of an object.

var propertyEntries = Object.entries(person);
console.log(propertyEntries);

Result:

[["name", "Shravan Kasagoni"], ["age", 20], ["isActive", true]]

propertyEntries.forEach(function(propertyEntry) {
  console.log(propertyEntry[0], propertyEnry[1]);
});

Result:

name Shravan Kasagoni
age 20
isActive true

The Object.entries() method introduced in ES6.

The Object.keys(), Object.values(), Object.entries() methods returns only own properties (properties created directly on the object) of an object, they exclude the prototype properties.

Method 5: Object.getOwnPropertyNames()

The Object.getOwnPropertyNames() method returns all enumerable and own properties of an object as an array.

var ownProperties = Object.getOwnPropertyNames(person);
console.log(ownProperties);

Result:

["name", "age", "isActive"]

In the blog post lot of places we mentioned enumerable properties, read more about them in the blog post: Javascript Object Property Attributes: configurable, enumerable, value, writable.

Get all the sample code from below gist: