Benchmark: Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array VS Object.keys as separate array with for loop

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 = {};

for (let i = 0; i < 100; i++) {
	window.parentObj[makeid()] = makeid();
}

Tests:

Object.entries
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]; } });
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; } });
Object.entries without array
const newObj = {}; Object.entries(window.parentObj).forEach((keyAndVal, i) => { if ((i % 2) === 0) { newObj[keyAndVal[0]] = keyAndVal[1]; } });
Object.keys as separate array with for loop
const newObj = {}; const keys = Object.keys(window.parentObj) for (let i = 0; i < keys.length; i++) { const k = keys[i] if ((i % 2) === 0) { newObj[k] = window.parentObj[k]; } };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.entries
Object.keys
Object.keys with extra array
Object.entries without array
Object.keys as separate array with for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Object.keys

215K/s

Object.keys as separate array with for loop

213K/s

Object.keys with extra array

187K/s

Object.entries without array

77K/s

Object.entries

75K/s

View exact numbers

Test name	Executions per second
✓ Object.keys	214,934 Ops/sec
Object.keys as separate array with for loop	212,613 Ops/sec
Object.keys with extra array	186,831 Ops/sec
Object.entries without array	76,882 Ops/sec
Object.entries	75,257 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Overview**

The provided benchmark definition compares four different approaches to iterate over an object's key-value pairs:

1. `Object.entries`
2. `Object.keys`
3. `Object.keys` with an extra array
4. `Object.entries` without an array

These approaches are compared in terms of performance, and the results indicate which method is faster.

**Options Compared**

The four options being compared are:

* `Object.entries`: Returns an array-like object containing a key-value pair list for each iteration.
	+ Pros: Can be more memory-efficient than using `Object.keys` or creating an extra array. Also, allows for easy iteration over the key-value pairs using destructuring.
	+ Cons: Requires JavaScript version 13 or later (previously known as ECMAScript Next), and some older browsers may not support it.
* `Object.keys`: Returns an array-like object containing the keys of the given object.
	+ Pros: Widespread browser support, including older versions. Can be used with any JavaScript engine.
	+ Cons: Requires more memory to store the extra array, which can impact performance for large objects.
* `Object.keys` with an extra array: Modifies the original object by creating a new array containing only the keys.
	+ Pros: Can be faster than using `Object.entries` due to fewer function calls.
	+ Cons: Modifies the original object, which might not be desirable in all cases. Also, creates a temporary array that needs to be garbage collected.
* `Object.entries` without an array: Uses a for...of loop to iterate over the key-value pairs.
	+ Pros: Can be more memory-efficient than using `Object.keys` or creating an extra array. Also, allows for easy iteration over the key-value pairs.
	+ Cons: Requires JavaScript version 13 or later (previously known as ECMAScript Next), and some older browsers may not support it.

**Library**

None of the provided benchmark definitions use a library. The tests are self-contained and rely solely on built-in JavaScript functionality.

**Special JS Feature or Syntax**

The benchmark definition uses JavaScript 13's `const` init syntax for declaring variables, which is more concise than traditional `var` declarations.

**Other Considerations**

* The benchmark results indicate that the best approach depends on the specific use case. For example, if memory efficiency is crucial, `Object.entries` might be a better choice. However, if modifying the original object is acceptable and you want to minimize function calls, `Object.keys` with an extra array could be faster.
* The results also highlight the importance of JavaScript version support. Using older browsers or versions may impact performance due to lack of built-in support for certain features.

**Alternatives**

Other alternatives to compare would include:

* Using `for...in` instead of `for...of` loops
* Comparing different iteration methods, such as using `Object.keys()` with a `for` loop versus using an array's `forEach()` method
* Adding additional test cases that simulate real-world scenarios, such as iterating over objects with large numbers of key-value pairs or accessing properties on objects in nested structures

Keep in mind that the best approach will depend on the specific use case and requirements. This benchmark serves as a starting point for understanding performance differences between these JavaScript iteration methods.

Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array VS Object.keys as separate array with for loop (version: 0)

Comparing performance of: `Object.entries vs Object.keys vs Object.keys with extra array vs Object.entries without array vs Object.keys as separate array with for loop`

Created: 4 years ago by: Guest

Go to the latest result

Object.entries

Object.keys

Object.keys with extra array

Object.entries without array

Object.keys as separate array with for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array VS Object.keys as separate array with for loop (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Object.entries

Object.keys

Object.keys with extra array

Object.entries without array

Object.keys as separate array with for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Object.entries vs Object.keys vs Object.keys with extra array vs Object.entries without array vs Object.keys as separate array with for loop`