Benchmark: Object.entries VS Object.values VS Object.values with extra array VS Object.entries 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()] = makeid();
}

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Overview**

The benchmark compares four different approaches for iterating over object values in JavaScript:

1. `Object.entries()`
2. `Object.values()`
3. A variant of `Object.values()` with an extra array (`extraK` and `v`)
4. `Object.entries()` without using the array version

**What is being tested?**

The benchmark tests how quickly each approach can iterate over object values, specifically when only even-indexed values are retained.

**Options compared:**

1. **`Object.entries()`:** Returns an array of a given object's key-value pairs as [key, value]. In this case, the code uses `forEach()` to iterate over these entries and retain only the even-indexed values.
2. **`Object.values()`:** Returns an array containing all the values of an object. Again, the code uses `forEach()` to iterate over these values and retain only the even-indexed ones.
3. **`Object.values()` with extra array:** A variant of `Object.values()` that splits each key-value pair into two separate variables (`extraK` and `v`). The code then uses `if ((i % 2) === 0)` to retain only the even-indexed values.
4. **`Object.entries()` without array version:** Similar to option 1, but without using the extra array.

**Pros and cons of each approach:**

1. **`Object.entries()`:**
	* Pros: Simple and straightforward.
	* Cons: Requires an extra step to extract only the even-indexed values.
2. **`Object.values()`:**
	* Pros: Directly returns only the values, eliminating the need for additional processing.
	* Cons: May incur a performance penalty due to the unnecessary array creation.
3. **`Object.values()` with extra array:**
	* Pros: Allows for more flexible access to key-value pairs.
	* Cons: Introduces an extra variable (`extraK`) and may have performance overhead due to the unnecessary split operation.
4. **`Object.entries()` without array version:**
	* Pros: Similar performance characteristics to option 1.
	* Cons: Requires an additional step to extract only the even-indexed values.

**Other considerations:**

* The benchmark uses a large object with 100 entries, which may affect the results due to memory allocation and garbage collection.
* The use of `window.parentObj` suggests that this is a multi-threaded or parallelized test case, where each iteration is executed concurrently.

**Library used:**

None explicitly mentioned. However, it's worth noting that some modern browsers (e.g., Chrome) provide optimized implementations for certain methods, like `Object.values()`.

**Special JS feature or syntax:**

The benchmark uses the following features:

* `forEach()`: A method on arrays and objects that executes a provided function for each element in the array or object.
* Spread operator (`...`): Used to create an array from two separate variables (`extraK` and `v`).
* Conditional statements (`if ((i % 2) === 0)`): Used to determine which values to retain.

**Alternatives:**

For similar benchmarks, you might consider the following alternatives:

* Using `for...in` loop instead of `forEach()` or array methods.
* Comparing the performance of using `Object.entries()` with different iteration modes (e.g., `Symbol.iterator`, `Array.from()`) instead of just the `forEach()` method.

Keep in mind that the specific approach and configuration will depend on the requirements of your benchmark.

Latest run results:

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

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

Browser/OS: Chrome 76 on Mac OS X 10.14.5

View result in a separate tab

Test name	Executions per second
Object.entries	36564.4 Ops/sec
Object.values	31956.7 Ops/sec
Object.values with extra array	23054.2 Ops/sec
Object.entries without array	36073.5 Ops/sec

Related benchmarks:

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

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

Created: 5 years ago by: Guest

Jump to the latest result

Object.entries

Object.values

Object.values with extra array

Object.entries without array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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