Benchmark: Object values: Object.values VS Object.keys VS Object.keys with extra array VS Object.values without array

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.values
const newObj = {}; Object.values(window.parentObj).forEach((k, i) => { if ((i % 2) === 0) { newObj[i] = k; } });
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.values without array
const newObj = {}; Object.entries(window.parentObj).forEach((keyAndVal, i) => { if ((i % 2) === 0) { newObj[keyAndVal[0]] = keyAndVal[1]; } });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.values
Object.keys
Object.keys with extra array
Object.values without array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36

Browser/OS: Chrome 92 on Linux

View result in a separate tab

Test name	Executions per second
Object.values	47821.3 Ops/sec
Object.keys	44273.0 Ops/sec
Object.keys with extra array	31995.6 Ops/sec
Object.values without array	35580.4 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 benchmarking test case.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case, specifically focusing on comparing different methods to extract values from an object using `Object.values`, `Object.keys`, and variants of these methods with or without array destructuring. The test aims to measure the performance of each approach across multiple executions per second.

**Benchmark Options Compared**

1. **`Object.values(window.parentObj)`**: This method returns an array containing all the values of the given object.
2. **`Object.keys(window.parentObj)`**: This method returns an array containing the keys (property names) of the given object.
3. **`Object.keys(window.parentObj).forEach((k, i) => {...})`**: This approach iterates over the `Object.keys` result array using a callback function to extract values from the original object.
4. **`Object.keys(window.parentObj).forEach((k, i) => [k, window.parentObj[k]])`**: Similar to the previous variant, but uses an array destructuring syntax to extract both the key and value.
5. **`Object.entries(window.parentObj)`**: This method returns an array of tuples containing each key-value pair from the object.

**Pros and Cons of Each Approach**

1. **`Object.values()`**:
	* Pros: Returns a native array, which can be iterated over more efficiently than iterating over a string array.
	* Cons: May not be as readable or intuitive for all developers.
2. **`Object.keys()`**:
	* Pros: More readable and familiar to many developers, as it returns an array of keys rather than values.
	* Cons: Returns a string array, which can lead to slower performance due to the overhead of concatenating strings.
3. **`Object.keys().forEach()`**: This approach is similar to `Object.keys()`, but with added complexity due to the use of a callback function and array iteration.
4. **`Object.keys().forEach([k, window.parentObj[k]])`**: This variant uses array destructuring to extract both the key and value, making it more concise but potentially less readable for some developers.
5. **`Object.entries()`**:
	* Pros: Returns an array of tuples containing each key-value pair, which can be more efficient than iterating over separate `key` and `value` arrays.
	* Cons: May require additional processing to extract values from the tuple.

**Library Used**

There is no explicit library mentioned in the benchmarking test case. However, it uses the `window.parentObj` object, which suggests that this object is likely a global variable or a parent object passed to the script using `window.parent`.

**Special JS Features/Syntax**

The benchmarking test case utilizes modern JavaScript features such as:

* Array destructuring (`[k, window.parentObj[k]]`)
* Template literals (e.g., `makeid()`)
* Arrow functions (`(k, i) => {...}`)
* Spread operator (not explicitly used but implied by `Object.entries()`)

**Alternatives**

Other approaches to extract values from an object could include:

* Using a custom function or method on the object itself
* Using a library like Lodash or Ramda for functional programming utilities
* Using a third-party data structure or container library

Keep in mind that the choice of approach depends on the specific use case, personal preference, and performance requirements.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Object.values

Object.keys

Object.keys with extra array

Object.values without array

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):