Seven ways of iterate or enumerate object in javascript or typescript


There are many ways we can do iteration of JavaScript object, In this blog, we will discuss 7 ways of looping object in JavaScript with examples. The same examples works in typescript.

How to iterate object in javascript?

Object is a group of keys and values separated by commas, How do enumerate the properties of an javascript object?.

Follow are different ways of looping an plain object.

  • Simple for-in loop
  • ES5 Object.keys() method
  • ES6 for-of loop
  • ES8 Object.entries() method
  • Jquery each function
  • lodash forOwn and forIn functions
  • underscoreJS each method

Declared a  object with list of key and values

and intput is

  
var obj = {  
    "id": "1",  
    "name": "franc",  
    "salary": "5000"  
};  

and expected output is

id - 1  
name - franc  
salary - 5000  

Iterate using for-in loop

for-in is one of the simple loop in JavaScript used to iterate the key properties of an object.

  • It returns keys of an object not object itself.
  •  It also enumerates the parent properties of an object using prototype inheritance.
  • hasOwnProperty() method in if conditional expression used to ignore parent properties.
  • finally, display key and value separated by hyphen to console

Example

  
for (var key in obj) {  
    if (obj.hasOwnProperty(key)) {  
        console.log(key + " - " + obj[key]);  
    }  
}  

Using ECMAScript 5 object.entries method.

ES6 introduced Object.keys() and forEach method, to return enumerated properties of an objects.

  • Object.keys loops own properties only not prototype keys
  • It also used to return enumerates keys of an object or array
  • Returned array is not ordered
  • It returns an array of key strings for a given object
  • forEach works with object with plain keys but not suitable for arrays
  • combination of forEach with break, continue and return will not work together.
  
Object.keys(obj).forEach(function(key) {  
    console.log(key+" - "+obj[key]);  
});  

Using ES 6 for-of loop

ES6 added new for-of loop syntax to enumerate objects and arrays in simple ways

  
for (const key of Object.keys(obj)) {  
    console.log(key+" - " +obj[key]);  
}

Using ECMAScript 8 object.entries method 

object.entries is the new method introduced in ES8, This might works in latest browsers, polyfill or enable babel plugin to support in older browsers. It iterates own keys of an object, but ignores prototype inherited keys.

  
for (let [key, value] of Object.entries(obj)) {  
  console.log(`${key}- ${value}`);  
}  

JQuery each loop elements 

 Jquery library provides each function to iterates the properties of an jquery object. First argument is an object, second argument is an callback. The callback applied to each element of an object.

  
$.each(obj, function(key, value) {  
    console.log(key+" - "+value);  
});  

Lodash forOwn and forIn function

 forOwn() function in lodash used to iterate the object own properties forIn() function returns iterate object properties include inherited prototype properties. Both functions works like each properties returns iterate object. each iterate object has three values - value,key and object

  
_.forOwn(obj, function(value, key) {   
    console.log(key+" - "+value);  
} );  
  
_.forIn(obj, function(value, key) {   
    console.log(key+" - "+value);  
} );  

uderscoreJs each function

 each method is one of the utility function underscoreJS,.
It iterates keys of an objects and returns iterate for each property.
Iterates accepts object and callback, callback accepts value and key properties of an object

  
_.each(person, function(value, key) {  
     console.log(key +" - "+ value);  
});  

Similar Posts