Share it!

In the previous article, we looked at the tools JavaScript offers to perform Array iteration. With this fresh in our minds, we’ll take a look at the tools JavaScript offers for object properties iteration. That is, walking through object properties and their values.

Object properties iteration before ES6

JavaScript objects are an unordered list of key-value pairs. Each key is usually a string or a symbol while its associated value can be of any primitive type (string, boolean, number, undefined, or null), an object, or a function.

Before the advent of ECMAScript 6 in 2015, the only way of iterating with an object’s properties was using the for…in loop. This loop extracts the property names of an object and loops over them.

One known limitation of the for…in loop is that it iterates through all properties in the Prototype chain. If you only want to show the object’s properties, without the inherited ones, you need to verify that the property belongs to the object. The simplest way to do this is by using the hasOwnProperty method.

Enumerable properties

Being an enumerable property simply means that the property will show up if you iterate over the object using for..in loop. In ECMAScript 3 an object property definition consisted only of value, name and context. There was no way to manage whether a property would show up in this loop and all of the were listed.

In 2009, ECMAScript 5 introduced a new mechanism for managing and configuring what can be done to an object’s properties. A new .defineProperty() (and its multi-property sibling .defineProperties()) method was implemented.

The .defineProperty() method accepts 3 parameters:

  1. The object on which to define the property.
  2. The name of the property to be defined or modified.
  3. The descriptor for the property being defined or modified.

As you can most certainly guess, they define new object properties, just like the dot-notation property definition, but with one big difference: these methods let you control the behavior of each property.

In simple terms, “behavior” means the ability to change the value of the property after it’s been created (writable), the ability to control the available features of the property once defined (configurable). Last, but most relevant to this article, ES5 added the ability to determine whether the property will be enumerable (shown in the for..in loop).

By default, every new property created during initialization or by assignment using the “dot” operator (or inside the object’s initializer) is enumerable  (enumerable set to true). That means that all the properties defined like this will show up in the loops.

ES6 and Object properties iteration

ECMAScript 6 brought a new set of tools (methods) to quickly access an object’s properties and their values. These methods mean that developers no longer have to rely on for...in and hasOwnProperty to loop through these properties. Now, they can be accessed as an array and loop over this array.

Object.keys()

This ES6 method returns an array whose elements are strings representing the names the enumerable properties found directly upon object. The ordering of the properties is the same as that given by looping over the properties of the object manually (e.g. using a for...in loop).

Object.values()

The Object.values() method returns an array of a given object’s own enumerable property values, in the same order as that provided by a for..in loop. Unlike a for..in loop, however, this method returns only enumerable properties from the object, without looking into the Prototype chain.

Object.entries()

The Object.entries() method returns an array of a given object’s own enumerable properties and their associated values. In other words, this method returns and array of 2-item arrays, where the first item contains the property’s name (key), while the second holds the property’s value.

Accessing non-enumerable properties with Object.getOwnPropertyNames()

Unlike the previous methods, which only return enumerable properties, Object.getOwnPropertyNames() returns an array whose elements are strings corresponding to both enumerable and non-enumerable property names found in the object. As with the previous methods, this is done without fetching properties from the Prototype chain.


Share it!