Loop Through an Object in Javascript (6 ways)

Very common requirement many people encounter while working with javascript objects is to loop through an object to process its key or value or both. This article demonstrates easy ways to loop through an object in javascript using various example illustrations.

Table of Contents:

• Loop Through an Object in Javascript using for in
• Loop Through an Object in Javascript using Object.keys()
• Loop Through an Object in Javascript using Object.values()
• Loop Through an Object in Javascript using Object.entries()
• Loop Through an Object in Javascript using Object.getPropertyNames()
• Loop Through an Object in Javascript using Reflect.ownKeys()

Loop Through an Object in Javascript using For in

Example:-

Loop through the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”, age: 37}

Code:-

const personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984", age: 37};
for (var property in personObject) {
  if (personObject.hasOwnProperty(property)) {
      console.log(property + " -> " + personObject[property]);
  }
}

Output:-

personFirstName -> George
personLastName -> Smith
dateOfBirth -> Nov 14 1984
age -> 37

Loop Through an Object in Javascript using Object.keys()

Javascript’s Object.keys() returns an array of enumerable property names of the object. The method iterates the keys in the same order like that of a normal loop.

Example:-

Loop through the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”, age: 37}

Code:-

const personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984", age: 37};
for (var property of Object.keys(personObject))
{
  console.log(property + " -> " + personObject[property])
}

Output:-

personFirstName -> George
personLastName -> Smith
dateOfBirth -> Nov 14 1984
age -> 37

Note that Object.keys() will work ECMAScript 6 onwards.

Loop Through an Object in Javascript using Object.values()

Javascript’s Object.values() returns an array of enumerable property values of the object.

Example:-

Loop through the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”, age: 37} to process its values

Code:-

const personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984", age: 37};
for (var value of Object.values(personObject)) 
{
  console.log(value )
}

Output:-

George
Smith
Nov 14 1984
37

Loop Through an Object in Javascript using Object.entries()

Javascript’s Object.entries() returns an array of enumerable key-value pairs of the object.

Example:-

Loop through the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”, age: 37}

Code:-

const personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984", age: 37};
for (const [key, value] of Object.entries(personObject))
{
  console.log(key + "-> " + value);
}

Output:-

personFirstName-> George
personLastName-> Smith
dateOfBirth-> Nov 14 1984
age-> 37

Note that Object.entries() will work ECMAScript 6 onwards.

Loop Through an Object in Javascript using Object.getOwnPropertyNames()

Javascript’s Object.getOwnPropertyNames() returns an array of all properties (except for those which use Symbol) enumerable as well as non-enumerable of the given object.

Example:-

Loop through the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”, age: 37}

Code:-

const personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984", age: 37};
for (const propName of Object.getOwnPropertyNames(personObject)) {
  console.log(propName + " -> " + personObject[propName]);
}

Output:-

personFirstName -> George
personLastName -> Smith
dateOfBirth -> Nov 14 1984
age -> 37

Loop Through an Object in Javascript using Reflect.ownKeys()

Javascript’s Reflect.ownKeys() is static that returns an array of property keys of the target object.

Example:-

Loop through the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”, age: 37}

Code:-

const personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984", age: 37};
for (const key of Reflect.ownKeys(personObject) ){
  console.log(key + " -> " + personObject[key]);
}

Output:-

personFirstName -> George
personLastName -> Smith
dateOfBirth -> Nov 14 1984
age -> 37

I hope this article helped you to loop through an object in javascript. Good Luck !!!