{

Seven ways of javascript iterate object with example


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

javascript iterate object

Object is a group of key-value pairs separated by commas. How do enumerate the properties of a javascript object?

Follow are different ways of looping a 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

Let’s declare a const object with a list of keys and values.

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

object contains key-value pairs of a string type. The property key is string keyed.

and After iterating an object, Print the output as seen below

id - 1  
name - franc  
salary - 5000  

Iterate using a for-in loop

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

  • It returns the keys of an object, not the object itself.
  • It also enumerates the parent properties of an object using prototype chain inheritance.
  • hasOwnProperty() method used to check object own enumerable properties and inherited properties are not considered.
  • finally, display key and value separated by a 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 chain object keys.
  • It is also used to return enumerated keys of an object or array
  • The returned array is not ordered
  • It returns an array of key strings for a given object
  • forEach works with an object with plain keys but is not suitable for arrays.
  • a combination of forEach with break, continue, and return will not work together.
  
Object.keys(obj).forEach(function(key) {  
    console.log(key+" - "+obj[key]);  
});  

Using ES6 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 ECMAScript8 object.entries method

object. entries is the new method introduced in ES8.

It works in the latest browsers, polyfill, or enables the babel plugin to support older browsers.

It iterates the 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 iterate the properties of a jquery object. A first argument is an object, the second argument is a callback. The callback is applied to each element of an object.

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

Lodash forOwn and forIn function

lodash forOwn() function 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 underscores.
It iterates the keys of an object and returns iterations for each property.
Iterates accept object and callback, callback accepts a value and key properties of an object.

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

Conclusion

Learned multiple ways to iterate javascript objects using ES5, ES6, ES7, ES8 with examples.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.