JavaScript — Iterate Over Object Properties
All the ways currently available to iterate over object properties
Over the years ECMA released several versions of JavaScript, each version includes many features while some of them gave us more ways to iterate over object properties in one way or another.
In this article, we will go over all the ways currently available, and we will review their descriptions, versions, and performances.
Some things we need to know before we start
Enumerable property
As we will go through the different methods to iterate over object properties, most of the methods will iterate over enumerable properties only.
What is an Enumerable property?
“Enumerable properties are those properties whose internal enumerable flag is set to true, which is the default for properties created via simple assignment or via a property initializer.” — Mozilla.
Properties created using the method Object.defineProperty by default, will have the enumerable flag set to false and we will not enumerate them when iterating through some of our methods.
Iterating through an object’s own vs inherited properties
Some of the methods will iterate only over the object’s own properties, while others will iterate through the object’s own properties plus the object’s inherited properties. Based on your use case, choose the one that will suit you the best.
Object keys types
In JavaScript, object keys can be of type string or symbol only. If you will try to assign a numeric key to an object it will be transformed into a string key. Most of the methods will ignore any Symbolled-property while iterating over an object’s properties.
The Methods
1.Object.entries() method returns an array of a given object’s own enumerable string-keyed property [key, value] pairs. This method will not return a symbol-keyed property, and will not enumerate properties in the prototype chain.
This method is available since ES 8.
2.Object.keys() method returns an array of a given object’s own enumerable string-keyed property names. The method will not return a symbol-keyed property, and will not enumerate properties in the prototype chain.
This method is available since ES 5.1.
3.Object.values() method returns an array of a given object’s own enumerable property values. The method will not return a symbol-keyed property value, and will not enumerate values in the prototype chain.
This method is available since ES 8.
4.for…in statement iterates over all enumerable string-keyed properties of an object, including inherited enumerable properties.
This method is available since ES 1 (GOAT).
5.Object.getOwnPropertyNames() method returns an array of all the string-keyed properties owned by the object. The method will not return a symbol-keyed property, and will not enumerate properties in the prototype chain.
This method is available since ES 5.1.
6.Reflect.ownKeys() method returns an array of a given object’s own property keys. The method will return a symbol-keyed and string keyed property, and will not enumerate properties in the prototype chain.
This method is available since ES 6.
7.Object.getOwnPropertySymbols() method returns an array of all the symbol-keyed properties owned by the object. The method will not return a string-keyed property, and will not enumerate properties in the prototype chain.
This method is available since ES 6.
8.Converting an object into an iterable object and using a custom iterator.
By assigning a custom iterator to an object, we make the object iterable. We assign the iterator using the Symbol.iterator and a generator function.
Both symbols and generators' features became available since ES 6, and this implementation available from ES 6.
We can also assign the iterator to any object and not only to the “agent” object by assigning the iterator to the “Object” prototype.
In summary, we can view each method's attributes in the next table.
The Performance test
In the performance test, we will access the object’s own string-keyed property values ( the most common use case).
We will have two tests.
On the first test, we will iterate 100 times over an object with 100000 properties.
The result shows Object.keys is the fastest method to iterate over an object with 100,000 properties, twice as much then Object.entities and Object.values.
In the second place will be the for…in method available since the ES 1.
On the second test, we will iterate 100000 times over an object with 100 properties.
The result shows Object.keys is the fastest method to iterate over an object with 100 properties, three times faster than Object.values, and more than four times faster than Object.entries.
In the second place will be the for…in method available since the ES 1.
The code is written in typescript on an angular project and can be found in this link.
With the knowledge received from this article, I now believe you can choose more wisely which method will suit your needs the best when iterating over object properties.
