Developers tend to know how to iterate through JavaScript Arrays easily but most
times they tend to get confused while working with JavaScript Objects especially
beginners and intermediates. In this article, I’d show you Five (5) different
ways of iterating through JavaScript Objects and some performance comparison
tests to show you which is faster and more efficient.
* Useful tips :)
Property flags
Object properties, besides a value, have three special attributes (also known
as “flags”):
-
writable– iftrue, can be edited, else it's read-only. -
enumerable– iftrue, then listed in loops. -
configurable– iftrue, the property can be deleted and these attributes can be modified.
When we create a property “the usual way”, all of them are true. But we can
change them anytime.
The method
Object.getOwnPropertyDescriptor
allows us to query the full information about a property.
let user = {
name: "Bolaji"
};
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
console.log(descriptor);
// {value: "Bolaji", writable: true, enumerable: true, configurable: true}
What does an enumerable property mean?
Enumerable properties are those properties whose internal enumerable
flag is set to true, which is the default for properties created via simple
assignment.
Basically, if you create an object via obj = {foo: 'bar'} or something
thereabouts, all the properties are enumerable.
1. for…in loop
The for...in loop statement can be used to iterate over all
non-Symbol,
enumerable
properties
of an object.
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
for (let key in obj) {
let value = obj[key];
console.log(key, value);
}
// key1 value1
// key2 value2
// key3 value3
2. Object.keys
The Object.keys() method returns an array of Object keys. This creates an
array that contains the properties of the object. You can then loop through the
array to get the keys and values you need.
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
let items = Object.keys(obj);
console.log(items);
// ["key1", "key2", "key3"]
items.map(key => {
let value = obj[key];
console.log(key, value)
});
// key1 value1
// key2 value2
// key3 value3
3. Object.values
The Object.values() method returns an array of Objects Values. This creates an
array that contains the properties of the object. You can then loop through the
array to get the keys and values you need.
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
let items = Object.values(obj);
console.log(items);
// ["value1", "value2", "value3"]
items.map(value => {
console.log(value)
});
// value1
// value2
// value3
4. Object.getOwnPropertyNames
The Object.getOwnPropertyNames() method returns an array of all properties
(including non-enumerable properties except for those which use Symbol) found
directly in a given object. This creates an array that contains the properties
of the object. You can then loop through the array to get the keys and values
you need.
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
let items = Object.getOwnPropertyNames(obj);
console.log(items);
// ["key1", "key2", "key3"]
items.map(key => {
let value = obj[key];
console.log(key, value)
});
// key1 value1
// key2 value2
// key3 value3
5. Object.entries
The Object.entries() method returns an array of a given object's own
enumerable property [key, value] pairs.
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
let items = Object.entries(obj);
console.log(items);
// 0: ["key1", "value1"]
// 1: ["key2", "value2"]
// 2: ["key3", "value3"]
items.map(item => {
let key = item[0];
let value = item[1];
console.log(key, value);
});
// key1 value1
// key2 value2
// key3 value3
Performance Comparison
Now let's test all these techniques and compare each one based on their speed
and performance to determine which is faster and much efficient
Most browsers like Chrome and Firefox implement high-resolution timing in
performance.now(). The performance.now() method returns a
DOMHighResTimeStamp, measured in milliseconds.
Usage
let start = performance.now();
// code to be timed...
let duration = performance.now() - start;
Let’s begin testing…
// for... in loop
let start = performance.now();
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
for (let key in obj) {
let value = obj[key];
console.log(key, value);
}
let duration = performance.now() - start;
console.log(duration); // 0.8450000023003668 ms
// Object.keys
let start = performance.now();
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
let items = Object.keys(obj);
console.log(items);
items.map(key => {
let value = obj[key];
console.log(key, value)
});
let duration = performance.now() - start;
console.log(duration); // 1.3249999901745468 ms
// Object.values
let start = performance.now();
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
let items = Object.values(obj);
console.log(items);
items.map(value => {
console.log(value)
});
let duration = performance.now() - start;
console.log(duration); // 2.0549999899230897 ms
// Object.getOwnPropertyNames
let start = performance.now();
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
let items = Object.getOwnPropertyNames(obj);
console.log(items);
items.map(key => {
let value = obj[key];
console.log(key, value)
});
let duration = performance.now() - start;
console.log(duration); // 2.125000028172508 ms
// Object.entries
let start = performance.now();
let obj = {
key1: "value1",
key2: "value2",
key3: "value3"
}
let items = Object.entries(obj);
console.log(items);
items.map(item => {
let key = item[0];
let value = item[1];
console.log(key, value);
});
let duration = performance.now() - start;
console.log(duration); // 1.6349999932572246 ms
Test Results
According to our tests, here are the results in ascending order;
So, according to these results, the fastest way to iterate through JavaScript
Objects is the for…in loop. Now, this doesn't mean the other methods are
void or useless, it all depends on use cases.
The problem with a for...in loop is that it iterates through properties in the
Prototype chain. It iterates over object properties. Javascript arrays are just
a specific kind of object with some handy properties that help you treat them as
arrays, but they still have internal object properties and you don't mean to
iterate over these. for...inalso iterates over *all enumerable properties
* and not just the array’s elements. This can also lead to unexpected results.
When you loop through an object with the for...in loop, you need to check if
the property belongs to the object. You can do this with hasOwnProperty.
A better and more efficient way to loop through objects in ES6 is to first
convert the object into an array using Object.keys() , Object.values() ,
Object.getOwnPropertyNames or Object.entries() . Then you loop through the
array to get the keys and values.
Top comments (0)