Benchmark: Object.keys vs Object.values vs Object.entries creation

Script Preparation code:

var obj = new Object()
var keys = (new Array(10000)).fill(0).map((x, i) => { return i + 1 })
keys.forEach((x) => { obj['prop' + x] = x })

AخA
 
var obj = new Object()var keys = (new Array(10000)).fill(0).map((x, i) => { return i + 1 })keys.forEach((x) => { obj['prop' + x] = x })

Tests:

Object keys

const keys = Object.keys(obj);

for (let j1 = 0; j1 < keys.length; j1++) {
  
	const key = keys[ j1 ];
  	const value = obj[ key ];
  
	const result = key + value;
}

​x
 
const keys = Object.keys(obj);​for (let j1 = 0; j1 < keys.length; j1++) {      const key = keys[ j1 ];    const value = obj[ key ];      const result = key + value;}

Object entries

const entries = Object.entries(obj);

for (let j1 = 0; j1 < entries.length; j1++) {
  
	const entry = entries[ j1 ];
  
  	const key = entry[0];
  	const value = entry[1];
  
	const result = key + value;
}

 
const entries = Object.entries(obj);​for (let j1 = 0; j1 < entries.length; j1++) {      const entry = entries[ j1 ];      const key = entry[0];    const value = entry[1];      const result = key + value;}

Object values

const keys = Object.keys(obj);
const values = Object.values(obj);

for (let j1 = 0; j1 < keys.length; j1++) {
    
  	const key = keys[j1];
  	const value = values[j1];
  
	const result = key + value;
}

 
const keys = Object.keys(obj);const values = Object.values(obj);​for (let j1 = 0; j1 < keys.length; j1++) {        const key = keys[j1];    const value = values[j1];      const result = key + value;}

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 keys
Object entries
Object values

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object keys	753.1 Ops/sec
Object entries	595.1 Ops/sec
Object values	449.7 Ops/sec

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

Let's break down the provided JSON and explain what's being tested.

Benchmark Definition

The benchmark tests three ways to create objects in JavaScript:

Object.keys(): creates an array of property names of an object
Object.values(): creates an array of property values of an object
Object.entries(): creates an array of tuples containing both the key and value of each property

Options being compared

The benchmark compares the performance of these three methods for creating objects, specifically when iterating over the properties to perform some operation (in this case, concatenating a key with a value).

Pros and Cons of each approach:

Object.keys():
- Pros: efficient in terms of memory usage, as it only creates an array of property names.
- Cons: requires additional iteration to access the values, which might be slower than other methods.
Object.values():
- Pros: also efficient in terms of memory usage and can provide direct access to values without requiring additional iteration.
- Cons: similar to Object.keys(), requires an extra step to iterate over the properties to use their values.
Object.entries():
- Pros: creates a tuple containing both key and value, which might be faster when accessing both simultaneously (e.g., using destructuring).
- Cons: might have higher memory overhead due to the additional information in each entry.

Library usage

None of the benchmark cases explicitly uses any libraries. However, the JavaScript engine being used (V8) is an open-source library developed by Google.

Special JS features or syntax

The benchmark uses const declarations for variables and arrow functions, which are relatively recent syntax additions to JavaScript (introduced in ECMAScript 2015). They are not essential to understanding the performance comparison, but they are commonly used in modern JavaScript code.

Alternative approaches

Other methods to create objects in JavaScript that might be worth exploring in a benchmark include:

Using Object.create() and setting properties manually.
Using for...in or for...of loops to iterate over object properties.
Using destructuring assignment to extract values from the object directly.

Keep in mind that each approach has its trade-offs in terms of performance, readability, and maintainability.

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested.

**Benchmark Definition**

The benchmark tests three ways to create objects in JavaScript:

1. `Object.keys()`: creates an array of property names of an object
2. `Object.values()`: creates an array of property values of an object
3. `Object.entries()`: creates an array of tuples containing both the key and value of each property

**Options being compared**

**Pros and Cons of each approach:**

1. **`Object.keys()`**:
	* Pros: efficient in terms of memory usage, as it only creates an array of property names.
	* Cons: requires additional iteration to access the values, which might be slower than other methods.
2. **`Object.values()`**:
	* Pros: also efficient in terms of memory usage and can provide direct access to values without requiring additional iteration.
	* Cons: similar to `Object.keys()`, requires an extra step to iterate over the properties to use their values.
3. **`Object.entries()`**:
	* Pros: creates a tuple containing both key and value, which might be faster when accessing both simultaneously (e.g., using destructuring).
	* Cons: might have higher memory overhead due to the additional information in each entry.

**Library usage**

None of the benchmark cases explicitly uses any libraries. However, the JavaScript engine being used (V8) is an open-source library developed by Google.

**Special JS features or syntax**

The benchmark uses `const` declarations for variables and arrow functions, which are relatively recent syntax additions to JavaScript (introduced in ECMAScript 2015). They are not essential to understanding the performance comparison, but they are commonly used in modern JavaScript code.

**Alternative approaches**

Other methods to create objects in JavaScript that might be worth exploring in a benchmark include:

* Using `Object.create()` and setting properties manually.
* Using `for...in` or `for...of` loops to iterate over object properties.
* Using destructuring assignment to extract values from the object directly.

Keep in mind that each approach has its trade-offs in terms of performance, readability, and maintainability.

Related benchmarks:

Object.keys vs Object.values vs Object.entries creation (version: 0)

Comparing performance of: Object keys vs Object entries vs Object values

Created: 2 years ago by: Guest

Jump to the latest result