Seven ways of a 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.

You can check my other post on Javascript check substring exists in a String

javascript iterate object to iterate object code examples

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",
};

the 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 is used to check the object’s enumerable properties and inherited properties are not considered.
finally, display the 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 the Object.keys() and forEach methods, to return enumerated properties of an object.

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 a 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

The 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’s properties forIn() function returns iterate object properties including inherited prototype properties. Both functions work like each property returns an 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);
});

underscores 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, and ES8 with examples.