Iterating through JavaScript Objects - 5 Techniques and Performance Tests

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'll 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.

Property flags

Object properties, besides a value, have three special attributes (also known as “flags”):

writable – if true, can be edited, else it's read-only.
enumerable – if true, then listed in loops.
configurable – if true, 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.

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

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

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

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

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…

https://gist.github.com/BolajiAyodeji/f42e98d723eb4e5629691d7a148ee550

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...in also 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.

Iterating through JavaScript Objects - 5 Techniques and Performance Tests

Comments (1)

Web Engineering

Introduction to Babel and JavaScript Bundlers

More from this blog

Using GraphQL for Building Server Driven UIs

Career Update: Joining the Digital Public Goods Alliance

How to Build Design Editing Apps using Nextjs, Clerk, and IMGLY’s CE.SDK Engine

How to Build an Audio Chatbot with Nextjs, OpenAI, and ElevenLabs

How to Create an Automated Profile README using Nodejs and GitHub Actions

Property flags

What does an enumerable property mean?

for…in loop

Object.keys

Object.values

Object.getOwnPropertyNames

Object.entries

Performance Comparison

Test Results

Attributions

Command Palette

Comments (1)

Web Engineering

Introduction to Babel and JavaScript Bundlers

More from this blog

Property flags

What does an enumerable property mean?

for…in loop

Object.keys

Object.values

Object.getOwnPropertyNames

Object.entries

Performance Comparison

Test Results

Attributions