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

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()] = { innerVal: 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.entries for loop
const newObj = {}; let i = 0; for(const k of Object.keys(window.parentObj)){ if ((i % 2) === 0) { newObj[k] = window.parentObj[k]; } i++; }

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.entries for loop

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the provided JSON and benchmark preparation code to explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is designed to compare different approaches for iterating over object keys (values) in JavaScript. The goal is to determine which approach performs better.

**Script Preparation Code**

This script creates a large object `window.parentObj` with 100 properties, each with an inner value. The script also defines a `makeid()` function to generate random IDs for the properties.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark is likely running in a headless browser or using a command-line interface (CLI) tool.

**Individual Test Cases**

The test cases compare four different approaches:

1. **Object.keys**: This approach uses the `Object.keys()` method to get an array of object keys.
2. **Object.entries**: This approach uses the `Object.entries()` method to get an array of key-value pairs.
3. **Object.keys with extra array**: This approach uses `Object.keys()` and creates a new array by extracting the key from the first element of the result.
4. **Object.entries without array**: This approach uses `Object.entries()` but attempts to iterate over it as if it were an array.

**Comparison**

The test cases are comparing the performance of each approach in terms of:

* Number of executions per second (ExecutionsPerSecond)

**Approach Comparison**

Here's a brief overview of each approach and their pros and cons:

1. **Object.keys**: This approach is simple and efficient, as it uses built-in JavaScript method to get an array of keys. However, it may not be suitable for large objects or complex iterations.
2. **Object.entries**: This approach provides additional value by returning key-value pairs, which can be useful in certain scenarios. However, it may introduce overhead due to the creation of an array.
3. **Object.keys with extra array**: This approach creates a new array by extracting the key from the first element of the result. While it's simple, this approach may not provide any significant performance benefits and introduces additional memory allocation.
4. **Object.entries without array**: This approach attempts to iterate over `Object.entries()` as if it were an array, which is incorrect. It will likely cause errors or unexpected behavior.

**Library Usage**

None of the test cases use a library or external dependency.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark. The focus is on comparing different iteration approaches.

**Other Alternatives**

Some alternative approaches to iterating over object keys include:

* Using `for...in` loop, which can be slower than other methods.
* Using `Array.prototype.forEach()`, which can also introduce overhead due to array creation.
* Using a custom implementation with a `for...of` loop and indexing into the object directly.

It's worth noting that the best approach will depend on the specific use case and requirements.

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
Object.entries	89095.8 Ops/sec
Object.keys	112044.4 Ops/sec
Object.keys with extra array	67575.6 Ops/sec
Object.entries without array	90198.4 Ops/sec
Object.entries for loop	105463.8 Ops/sec

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Object.entries

Object.keys

Object.keys with extra array

Object.entries without array

Object.entries for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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