Benchmark: Object loops: for...in vs Object.keys+forEach (ES5) vs for...of (ES6) vs Object.entries (ES8)

Script Preparation code:

var obj = {};
for (let i = 0; i < 1000; i++) {
  obj['abc_' + i] = i;
}

function foo(bar) {
  return bar * 2 * 2;
}

Tests:

for...in
for (const key in obj) { if (obj.hasOwnProperty(key)) foo(obj[key]); }
Object.keys+forEach (ES5)
Object.keys(obj).forEach(function(key) { foo(obj[key]); });
for...of - keys (ES6)
for (const key of Object.keys(obj)) { foo(obj[key]); }
for...of - values (ES6)
for (const value of Object.values(obj)) { foo(value); }
for...of - entries (ES8)
for (const [key, value] of Object.entries(obj)) { foo(value); }
Object.entries (ES8)
Object.entries(obj).forEach(function(key, value) { foo(value); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for...in
Object.keys+forEach (ES5)
for...of - keys (ES6)
for...of - values (ES6)
for...of - entries (ES8)
Object.entries (ES8)

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark compares the performance of different ways to iterate over an object in JavaScript, specifically when working with built-in methods like `Object.keys()`, `forEach()`, and the new `for...of` syntax introduced in ES6. The goal is to determine which approach is most efficient for accessing and processing values within an object.

**Options Compared**

The benchmark tests six different approaches:

1. **For...in**: Using the traditional `for...in` loop, which iterates over both enumerable and non-enumerable properties of the object.
2. **Object.keys+forEach (ES5)**: Utilizing the `Object.keys()` method to get an array of enumerable property names and then using the `forEach()` method to iterate over those names.
3. **For...of - keys (ES6)**: Using the new `for...of` loop with the `keys()` method, which allows iterating over the object's own enumerable properties as key-value pairs.
4. **For...of - values (ES6)**: Employing the same `for...of` loop but using the `values()` method to iterate directly over the object's own enumerable values.
5. **For...of - entries (ES8)**: Leveraging the `entries()` method, which returns an array of key-value pairs, and then iterating over those pairs with a `for...of` loop.
6. **Object.entries (ES8)**: Similar to the previous option but using the `entries()` method directly within the `for...of` loop.

**Pros and Cons**

Here's a brief summary of each approach:

*   **For...in**: Pros - simple, well-known syntax; Cons - may include non-enumerable properties.
*   **Object.keys+forEach (ES5)**: Pros - flexible, can filter out non-enumerable properties using `.filter()`; Cons - less efficient due to array manipulation and method calls.
*   **For...of - keys (ES6)**: Pros - concise, easy to read; Cons - may be less intuitive for developers not familiar with the new syntax.
*   **For...of - values (ES6)**: Pros - concise, easy to read; Cons - may require additional processing to access object properties by value.
*   **For...of - entries (ES8)**: Pros - direct and efficient way to iterate over key-value pairs; Cons - requires support for ES8 syntax and methods.
*   **Object.entries (ES8)**: Pros - similar efficiency to `for...of - entries`; Cons - may be less familiar or intuitive for some developers.

**Library Usage**

None of the test cases explicitly use any external libraries. They rely solely on built-in JavaScript features and DOM elements (in case of the preparation code).

**Special JS Features/Syntax**

*   **For-of loops**: Introduced in ECMAScript 2015 (ES6), these loops provide a more concise way to iterate over sequences.
*   **Object entries method**: Introduced in ECMAScript 2017 (ES8), this method returns an array-like object containing the key-value pairs of the object.

**Other Alternatives**

In addition to the options tested, other approaches might include:

*   Using traditional `for` loops with indexing or `Array.prototype.forEach()`.
*   Leveraging libraries like Lodash for utility functions and iteration methods.
*   Exploring alternative data structures, such as arrays or sets, for faster lookups.

Keep in mind that performance differences may vary depending on the specific use case, hardware, and software environment.

Latest run results:

Run details: (Test run date: 10 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for...in	4451.4 Ops/sec
Object.keys+forEach (ES5)	6802.0 Ops/sec
for...of - keys (ES6)	6787.4 Ops/sec
for...of - values (ES6)	8064.6 Ops/sec
for...of - entries (ES8)	7091.3 Ops/sec
Object.entries (ES8)	7107.6 Ops/sec

Related benchmarks:

Object loops: for...in vs Object.keys+forEach (ES5) vs for...of (ES6) vs Object.entries (ES8) (version: 7)

Comparing performance of: for...in vs Object.keys+forEach (ES5) vs for...of - keys (ES6) vs for...of - values (ES6) vs for...of - entries (ES8) vs Object.entries (ES8)

Created: 6 years ago by: Registered User

Jump to the latest result

for...in

Object.keys+forEach (ES5)

for...of - keys (ES6)

for...of - values (ES6)

for...of - entries (ES8)

Object.entries (ES8)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):