Seven ways to iterate object in javascript(example)

Seven ways to iterate object in javascript(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 Looping object examples

Object is a collection of key-value pairs separated by commas, enclosed in {}.

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
  • underscore 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 type.

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

id - 1
name - franc
salary - 5000

Use a for-in loop

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

  • for loop iterates keys of an object, returns the keys of an object.
  • It also iterates the parent properties of an object using prototype chain inheritance.
  • hasOwnProperty() method is used to check the object’s enumerable properties, if the condition is true, 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. first, Object.keys() method is used to return an array of own properties of an object. then, for-of loop is used to iterate the array of properties.

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, used to iterate keys and values of objects, and ignores inherited properties.

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

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

JQuery each loop elements

The Jquery library provides an each function to iterate the properties of a jQuery object.

The 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 is 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.