Benchmark: Object values: Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array VS for .. of

Script Preparation code:

function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

window.parentObj = new Array();

for (let i = 0; i < 100; i++) {
	window.parentObj[makeid()] = { innerVal: makeid() };
}

​x
 
function makeid() {  var text = "";  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";​  for (var i = 0; i < 5; i++)    text += possible.charAt(Math.floor(Math.random() * possible.length));​  return text;}​window.parentObj = new Array();​for (let i = 0; i < 100; i++) {    window.parentObj[makeid()] = { innerVal: makeid() };}​​

Tests:

Object.entries

const newObj = {};
Object.entries(window.parentObj).forEach(([k, v], i) => {
  if ((i % 2) === 0) {
	newObj[k] = v;    
  }
});

 
const newObj = {};Object.entries(window.parentObj).forEach(([k, v], i) => {  if ((i % 2) === 0) {    newObj[k] = v;      }});

Object.keys

const newObj = {};
Object.keys(window.parentObj).forEach((k, i) => {
  if ((i % 2) === 0) {
	newObj[k] = window.parentObj[k];    
  }
});

 
const newObj = {};Object.keys(window.parentObj).forEach((k, i) => {  if ((i % 2) === 0) {    newObj[k] = window.parentObj[k];      }});

Object.keys with extra array

const newObj = {};
Object.keys(window.parentObj).forEach((k, i) => {
  const [extraK, v] = [k, window.parentObj[k]]
  if ((i % 2) === 0) {
	newObj[extraK] = v;    
  }
});

 
const newObj = {};Object.keys(window.parentObj).forEach((k, i) => {  const [extraK, v] = [k, window.parentObj[k]]  if ((i % 2) === 0) {    newObj[extraK] = v;      }});

Object.entries without array
const newObj = {}; Object.entries(window.parentObj).forEach((keyAndVal, i) => { if ((i % 2) === 0) { newObj[keyAndVal[0]] = keyAndVal[1]; } });
const newObj = {};
Object.entries(window.parentObj).forEach((keyAndVal, i) => {
if ((i % 2) === 0) {
newObj[keyAndVal[0]] = keyAndVal[1];
}
});

for .. of

const newObj = {};
for(const k of window.parentObj) {
  const i = window.parentObj[k];
  if ((i % 2) === 0) {
	newObj[k] = i;    
  }
};

 
const newObj = {};for(const k of window.parentObj) {  const i = window.parentObj[k];  if ((i % 2) === 0) {    newObj[k] = i;      }};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Object.entries
Object.keys
Object.keys with extra array
Object.entries without array
for .. of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Object.entries	137639.3 Ops/sec
Object.keys	398019.8 Ops/sec
Object.keys with extra array	363528.3 Ops/sec
Object.entries without array	138183.4 Ops/sec
for .. of	71408832.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

Benchmark Overview

The benchmark is comparing the performance of four different methods for iterating over an object:

Object.entries
Object.keys
Object.keys with an extra array (which doesn't make sense in this context)
for .. of

These methods are being compared on a large dataset of objects, where each object has 100 properties with random keys and values.

Method Comparison

Object.entries: This method returns an array of key-value pairs from the object. The benchmark uses forEach to iterate over this array and construct a new object with only every other pair.
Object.keys: This method returns an array of the object's property keys. The benchmark uses forEach to iterate over this array and construct a new object with only every other key-value pair.
Object.keys with extra array (which doesn't make sense in this context): As mentioned earlier, using an extra array with Object.keys is unnecessary and might introduce performance overhead due to the creation of an additional data structure.
for .. of: This method allows iterating over an iterable object (in this case, an object) without creating a new array or object.

Performance Comparison

The benchmark results show that:

for .. of is the fastest method, with approximately 36% more executions per second than the next-fastest method.
Object.entries and Object.keys have similar performance profiles, with Object.entries being slightly faster (around 2-3%).
The "extra array" variant has significantly slower performance due to unnecessary data structure creation.

Pros and Cons of Each Approach

Object.entries: Pros:
- Fast iteration over key-value pairs.
- Suitable for objects with complex logic. Cons: May require more memory to store the iterator object.
Object.keys: Pros:
- Simple and intuitive syntax.
- Suitable for objects with simple property names. Cons: Slower iteration due to array creation.
Object.keys with extra array (not recommended): Not recommended due to unnecessary data structure creation, which slows down performance.
for .. of: Pros:
- Fastest iteration over the object.
- Suitable for objects with simple property names. Cons: Requires support for the for .. of syntax.

Library and Special JS Feature

There is no explicit mention of any libraries or special JavaScript features being used in this benchmark. However, it's worth noting that Object.entries was introduced in ECMAScript 2015 (ES6), which might affect compatibility with older browsers or environments.

Alternatives

If you're looking for alternative methods to iterate over objects, consider the following:

Lodash: A popular utility library that provides various iteration functions, including _.forEachObject() and _ _.pairs().
Underscore.js: Another utility library that offers iteration functions like _.each() and _ _.reduce().
Native methods: For simple object iterations, you can use native methods like for loops or recursive functions.

Keep in mind that each method has its pros and cons, and the choice ultimately depends on your specific use case and performance requirements.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark is comparing the performance of four different methods for iterating over an object:

1. `Object.entries`
2. `Object.keys`
3. `Object.keys` with an extra array (which doesn't make sense in this context)
4. `for .. of`

These methods are being compared on a large dataset of objects, where each object has 100 properties with random keys and values.

**Method Comparison**

1. **Object.entries**: This method returns an array of key-value pairs from the object. The benchmark uses `forEach` to iterate over this array and construct a new object with only every other pair.
2. **Object.keys**: This method returns an array of the object's property keys. The benchmark uses `forEach` to iterate over this array and construct a new object with only every other key-value pair.
3. **Object.keys with extra array** (which doesn't make sense in this context): As mentioned earlier, using an extra array with `Object.keys` is unnecessary and might introduce performance overhead due to the creation of an additional data structure.
4. **for .. of**: This method allows iterating over an iterable object (in this case, an object) without creating a new array or object.

**Performance Comparison**

The benchmark results show that:

* `for .. of` is the fastest method, with approximately 36% more executions per second than the next-fastest method.
* `Object.entries` and `Object.keys` have similar performance profiles, with `Object.entries` being slightly faster (around 2-3%).
* The "extra array" variant has significantly slower performance due to unnecessary data structure creation.

**Pros and Cons of Each Approach**

1. **Object.entries**: Pros:
	* Fast iteration over key-value pairs.
	* Suitable for objects with complex logic.
	Cons: May require more memory to store the iterator object.
2. **Object.keys**: Pros:
	* Simple and intuitive syntax.
	* Suitable for objects with simple property names.
	Cons: Slower iteration due to array creation.
3. **Object.keys with extra array** (not recommended): Not recommended due to unnecessary data structure creation, which slows down performance.
4. **for .. of**: Pros:
	* Fastest iteration over the object.
	* Suitable for objects with simple property names.
	Cons: Requires support for the `for .. of` syntax.

**Library and Special JS Feature**

There is no explicit mention of any libraries or special JavaScript features being used in this benchmark. However, it's worth noting that `Object.entries` was introduced in ECMAScript 2015 (ES6), which might affect compatibility with older browsers or environments.

**Alternatives**

If you're looking for alternative methods to iterate over objects, consider the following:

* **Lodash**: A popular utility library that provides various iteration functions, including `_.forEachObject()` and `_ _.pairs()`.
* **Underscore.js**: Another utility library that offers iteration functions like `_.each()` and `_ _.reduce()`.
* **Native methods**: For simple object iterations, you can use native methods like `for` loops or recursive functions.

Keep in mind that each method has its pros and cons, and the choice ultimately depends on your specific use case and performance requirements.

Related benchmarks:

Object values: Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array VS for .. of (version: 0)

Comparing performance of: Object.entries vs Object.keys vs Object.keys with extra array vs Object.entries without array vs for .. of

Created: 3 years ago by: Guest

Jump to the latest result