Benchmark: Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array 1234

Script Preparation code:



window.parentObj = {};

for (let i = 0; i < 100000; i++) {
	window.parentObj['id_'+i] = 'id_'+i;
}
console.log(window.parentObj);

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) => { });
Object.keys with extra array
const newObj = {}; Object.keys(window.parentObj).forEach((k, i) => { const [extraK, v] = [k, window.parentObj[k]] });
Object.entries without array
const newObj = {}; Object.entries(window.parentObj).forEach((keyAndVal, 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

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/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Object.entries	35.9 Ops/sec
Object.keys	95.3 Ops/sec
Object.keys with extra array	54.0 Ops/sec
Object.entries without array	36.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, which are small tests designed to measure the performance of specific parts of code.

The benchmark you provided measures the performance of four different approaches for iterating over an object's keys:

1. `Object.entries`
2. `Object.keys` (without any modifications)
3. `Object.keys` with an extra array
4. `Object.entries` without using an array

**Options Comparison**

Here are the options being compared, along with their pros and cons:

### Option 1: `Object.entries`

* **Description**: Iterates over an object's key-value pairs as arrays.
* **Pros**: Can be more efficient for certain use cases, such as when you need to access both the key and value simultaneously.
* **Cons**: Requires using an array, which can lead to additional memory allocation and garbage collection overhead.

### Option 2: `Object.keys`

* **Description**: Returns an array of a given object's keys.
* **Pros**: Lightweight and simple implementation. Does not require extra memory allocation.
* **Cons**: Only returns the keys, not the values, so you need to access the value using `obj[key]`.

### Option 3: `Object.keys` with extra array

* **Description**: Returns an array of a given object's keys and an additional array containing the corresponding values.
* **Pros**: Allows for easy access to both keys and values without having to use indexing or bracket notation (`obj[key]`).
* **Cons**: Requires using an extra array, which can lead to increased memory allocation and garbage collection overhead.

### Option 4: `Object.entries` without array

* **Description**: Iterates over an object's key-value pairs as arrays, but without using the `$0` and `$1` variables that are used to access the array elements in older browsers.
* **Pros**: Avoids potential issues with older browser support (e.g., Safari 5.x).
* **Cons**: May not be optimized for older browsers due to the absence of `$0` and `$1`.

**Library: `window.parentObj`**

The `window.parentObj` variable is a global object that is used as the input data for each benchmark. Its purpose is to provide a simple, fixed object with 100,000 properties (e.g., "id_0", "id_1", ..., "id_99999") that are populated with string values.

**Special JS feature: Array destructuring**

In the benchmark definitions, you'll notice the use of array destructuring syntax, such as `[k, v] = [k, window.parentObj[k]]`. This is a modern JavaScript feature introduced in ECMAScript 2015 (ES6) that allows for concise way to extract multiple values from an array.

**Alternatives**

If you're interested in exploring alternative approaches or optimizing your benchmark, here are some options:

* Use `Object.entries` with the `$0` and `$1` variables to take advantage of older browser support.
* Implement a custom iterator function using `for...of` loops.
* Use a third-party library like Lodash to provide additional utility functions for iterating over objects.

Keep in mind that optimizing microbenchmarks often requires careful consideration of memory allocation, garbage collection, and browser-specific quirks.

Related benchmarks:

Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array 1234 (version: 0)

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

Created: 2 years ago by: Registered User

Jump to the latest result

Object.entries

Object.keys

Object.keys with extra array

Object.entries without array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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