Seven ways of a javascript iterate object with example
- Admin
- Nov 29, 2023
- Javascript
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 forarrays
.- a combination of
forEach
withbreak
,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.