This post includes different ways for iterating over JavaScript Object entries and a performance comparison of those techniques.
Technique 1 : Object.entries
Object.entries() returns an iterable list of key, value pairs. This list counts only enumerable properties and doesn't include properties from prototype chain.
What are Enumerable Properties?
Properties created via simple assignment or via a property initializer
Technique 2 : Object.keys
Object.keys() returns an array of object keys. However, this function returns only enumerable properties.
Set of keys, returned from this method can be iterated in many different ways. Based on the performance comparison of array iteration techniques, while forEach being the most convenient method, traditional for loop outperforms every other technique. Hence all object iteration techniques that requires array iteration will be compared with both forEach and traditional loop.
Set of keys, returned from this method can be iterated in many different ways. Based on the performance comparison of array iteration techniques, while forEach being the most convenient method, traditional for loop outperforms every other technique. Hence all object iteration techniques that requires array iteration will be compared with both forEach and traditional loop.
Technique 3 : Object.values
Object.values() returns an array of object property values. This function returns values of enumerable properties only.
for...in loop can be used to iterate over enumerable properties of JavaScript objects. This loop includes inherited properties from prototype chain.Technique 4 : for...in loop
Technique 5 : Object.getOwnPropertyNames
Object.getOwnPropertyNames returns all the properties of an object including non enumerable properties. The result set will also include properties inherited from prototype chain.
Performance Comparison
In order to compare the performance of each of above techniques, following script was executed for 1000 objects having 1 million properties in each.
Results
Rank | Technique |
Time(ms)
|
1 | Object.keys() with for loop |
560.44
|
2 | for...in loop |
645.65
|
3 | Object.keys() with forEach |
648.31
|
4 | Object.getOwnPropertyNames() with for loop |
999.74
|
5 | Object.getOwnPropertyNames() woth forEach |
1072.30
|
6 | Object.values() with for loop |
1144.67
|
7 | Object.values() with forEach |
1116.62
|
8 | Object.entries() with for loop |
1880.95
|
9 | Object.entries() with forEach |
1980.55
|
Chart below gives a better comparison overview of the techniques.
Based on above results, the winner or the fastest technique to iterate over Javascript Object entries is Object.keys() with traditional for loop!
Hello. Thank you for the good content.
ReplyDeleteI am a developer in Korea. Can I translate and post this posting?
Yes. Please go ahead.
Delete