Best ways to iterate or enumerate objects in javascript or typescript examples

Best ways to iterate or enumerate objects in javascript or typescript examples

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

How to iterate an object in javascript?

An object is a group of keys and values 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 declared an object with a list of keys and values.

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

and, the expected output is

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 inheritance.
  • hasOwnProperty() method in if conditional expression used to ignore parent properties.
  • 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 Object. keys() and forEach method, to return enumerated properties of objects.

  • Object.keys loops own properties only not prototype 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 a 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 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 ECMAScript 8 object.entries method

object. entries is the new method introduced in ES8, This might work in the latest browsers, polyfill, or enable the babel plugin to support older browsers. It iterates its 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. 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

forOwn() function in lodash used to iterate the object own properties forIn() function returns iterate object properties include 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);
});

uderscoreJs each function

each method is one of the utility functions underscoreJS. It iterates the keys of an object and returns an iterate 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

Listed all different ways to iterate javascript objects. You can choose based on your requirement.