Explain different ways to traverse the properties of an object in javascript

There are three ways to traverse the properties of an object.

a.   for...in loop

b.   Object.keys(o)

c.   Object.getOwnPropertyNames(o)

for…in loop

for...in loop is used to traverse all enumerable properties of an object and its prototype chain.

Below program print all the properties of an object.

function printProperties(object, objectName, tab){

  for(property in object){

    console.log(tab + objectName + "." + property + " => " + object[property]);

   

    if(object[property] instanceof Object){

      printProperties(object[property], objectName+"."+property, "  " + tab);

    }

  }

}

HelloWorld.js

var employee = {
  "firstName" : "Krishna",
  "lastName" : "Majety",
  "age" : 29,
  "address" : {
    "city" : "Bangalore",
    "area" : "Marthalli"
  }
}

function printProperties(object, objectName, tab){
  for(property in object){
    console.log(tab + objectName + "." + property + " => " + object[property]); 
    
    if(object[property] instanceof Object){
      printProperties(object[property], objectName+"."+property, "  " + tab);
    }
  }
}

printProperties(employee, "employee", "")

Output

employee.firstName => Krishna

employee.lastName => Majety

employee.age => 29

employee.address => [object Object]

  employee.address.city => Bangalore

  employee.address.area => Marthalli

Using Object.keys(o)

This method returns an array with all the own (not in the prototype chain)

Enumerable property names.

HelloWorld.js

var employee = {
  "firstName" : "Krishna",
  "lastName" : "Majety",
  "age" : 29,
  "address" : {
    "city" : "Bangalore",
    "area" : "Marthalli"
  }
}


function printProperties(object, objectName, tab){
  var props = Object.keys(object);
  
  for(var i = 0; i < props.length; i++){
    var property = props[i];
    console.log(tab + objectName + "." + property + " => " + object[property]); 
    
    if(object[property] instanceof Object){
      printProperties(object[property], objectName+"."+property, "  " + tab);
    }
    
  }
}

printProperties(employee, "employee", "")

Output

employee.firstName => Krishna

employee.lastName => Majety

employee.age => 29

employee.address => [object Object]

  employee.address.city => Bangalore

  employee.address.area => Marthalli

Object.getOwnPropertyNames(o)

This method returns an array containing all own properties' names (enumerable or not) of an object o.

HelloWorld.js

var employee = {
  "firstName" : "Krishna",
  "lastName" : "Majety",
  "age" : 29,
  "address" : {
    "city" : "Bangalore",
    "area" : "Marthalli"
  }
}


function printProperties(object, objectName, tab){
  var props = Object.getOwnPropertyNames(object);
  
  for(var i = 0; i < props.length; i++){
    var property = props[i];
    console.log(tab + objectName + "." + property + " => " + object[property]); 
    
    if(object[property] instanceof Object){
      printProperties(object[property], objectName+"."+property, "  " + tab);
    }
    
  }
}

printProperties(employee, "employee", "")

Output

employee.firstName => Krishna

employee.lastName => Majety

employee.age => 29

employee.address => [object Object]

  employee.address.city => Bangalore

  employee.address.area => Marthalli

Previous                                                 Next                                                 Home