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]; } });

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Object.entries without array

398K/s

Object.entries

366K/s

Object.keys

169K/s

Object.keys with extra array

80K/s

Fastest: Object.entries without array (5.0x faster)

View exact numbers

✓ Object.entries without array: 397,545 ops/sec
• Object.entries: 365,726 ops/sec
• Object.keys: 168,511 ops/sec
• Object.keys with extra array: 79,546 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Browser/OS: Chrome 139 on Windows

View result in a separate tab

Object.keys

240K/s

Object.keys with extra array

219K/s

Object.entries without array

76K/s

Object.entries

73K/s

View exact numbers

Test name	Executions per second
✓ Object.keys	239,605 Ops/sec
Object.keys with extra array	219,313 Ops/sec
Object.entries without array	76,009 Ops/sec
Object.entries	72,876 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 7 years ago by: Guest

Go to the latest result

Object.entries

Object.keys

Object.keys with extra array

Object.entries without array

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 7 years ago by: Guest

Go to the latest result

Object.entries

Object.keys

Object.keys with extra array

Object.entries without array

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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