Benchmark: Object values: Object.entries VS Object.keys VS Object.keys 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()] = { 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]; } });

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: 25 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
Object.entries	248160.0 Ops/sec
Object.keys	89931.6 Ops/sec
Object.keys with extra array	47773.2 Ops/sec
Object.entries without array	243474.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is comparing four different approaches to iterate over an object's entries in JavaScript:

1. `Object.entries()`
2. `Object.keys()` without any modifications
3. `Object.keys()` with an extra array (not explicitly used, but modified for the test)
4. `Object.entries()` without using an array

The test creates a large object (`window.parentObj`) with 100 properties and iterates over it using each of the four approaches. The objective is to measure which approach is the fastest.

**Options Compared**

Here's a brief description of each option:

1. **`Object.entries()```**: This method returns an array of key-value pairs for the specified object. In this test, it's used with and without an extra array.
2. **`Object.keys()`**: This method returns an array of a given object's own enumerable property names. In this test, it's used as-is and with an extra array (although not explicitly used).
3. **`Object.keys() + extra array`**: This approach is similar to the previous one but with an unnecessary modification (an extra array).

**Pros and Cons**

Here are some pros and cons of each approach:

1. `Object.entries()`:
	* Pros: Efficient, as it returns a direct array of key-value pairs.
	* Cons: May incur a higher overhead due to the need to create an array.
2. **`Object.keys()`**:
	* Pros: Generally faster than `Object.entries()`, as it only needs to access property names.
	* Cons: Can be slower for large objects, as it requires iterating over an array of property names.
3. **`Object.keys() + extra array`**:
	* Pros: None apparent.
	* Cons: This approach is unnecessary and may introduce additional overhead due to the extra array.

**Library**

None of the options explicitly use a library. However, `window.parentObj` suggests that this benchmark might be related to a web development context, where objects are commonly used.

**Special JS Feature/Syntax**

There's no explicit mention of any special JavaScript features or syntax being tested in this benchmark. However, it's worth noting that the test uses some advanced concepts, such as:

* Object creation with nested properties (`window.parentObj[makeid()] = { innerVal: makeid() }`)
* Array manipulation (`Math.floor(Math.random() * possible.length)`)

These features are commonly used in JavaScript development, but might not be immediately apparent to less experienced developers.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few examples:

1. **Using `for...in`**: Instead of using `Object.keys()` or `Object.entries()`, you could use the older `for...in` loop to iterate over an object's properties.
2. **Using a library like Lodash**: If you're familiar with Lodash, you might consider using its `keys()` function to iterate over an object's properties.
3. **Using a custom iterator**: In some cases, creating a custom iterator using the `Symbol.iterator` API or a library like `iterable-iterator` can provide more control and flexibility when iterating over large objects.

Keep in mind that these alternatives might not be relevant to this specific benchmark, but they demonstrate the flexibility of JavaScript iteration methods.

Related benchmarks:

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

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

Created: 6 years ago by: Guest

Jump to the latest result

Object.entries

Object.keys

Object.keys 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 6 months ago):