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: 2 years ago)

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

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
Object.entries	59022.5 Ops/sec
Object.keys	69349.0 Ops/sec
Object.keys with extra array	42081.6 Ops/sec
Object.entries without array	59817.7 Ops/sec
Object.keys as separate array with for loop	70137.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

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: 2 years ago by: Guest

Jump 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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