Benchmark: Object.entries + reduce VS Object.keys + forEach (fixed)

Script Preparation code:

window.obj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
}

Tests:

Object.entries + reduce
Object.entries(obj).reduce((acc, [k, v]) => ({ [k]: v, ...acc }), {});
Object.keys + forEach
const newObj = {}; Object.keys(obj).forEach((k) => newObj[k] = obj[k]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.entries + reduce
Object.keys + forEach

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/109.0.0.0 Safari/537.36 Edg/109.0.1518.55

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
Object.entries + reduce	823506.1 Ops/sec
Object.keys + forEach	990704.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark is designed to compare two different approaches for iterating over object keys and values: `Object.keys` with `forEach` versus `Object.entries` with `reduce`.

**What's being compared?**

In the first test case, `Object.entries(obj).reduce((acc, [k, v]) => ({ [k]: v, ...acc }), {})`, we have:

* `Object.entries(obj)`: This returns an array of key-value pairs, where each pair is in the format `[key, value]`.
* `reduce()`: This applies a function to each element in the array and reduces it to a single output value.
* The accumulator (`acc`) is initialized as an empty object `{}`, and for each iteration, we update the accumulator by merging the current key-value pair into it.

In contrast, the second test case uses:

* `Object.keys(obj)`: This returns an array of keys from the object, without their corresponding values.
* `forEach()`: This applies a function to each element in the array and does not return any value.

**Pros and Cons**

* **`Object.entries` with `reduce`**:
	+ Pros: Efficient use of memory since we only create one array of key-value pairs, and we can take advantage of JavaScript's optimized `reduce()` method.
	+ Cons: More complex code, potentially harder to read for beginners, and might require additional libraries or polyfills if not supported by older browsers.
* **`Object.keys` with `forEach`**:
	+ Pros: Simpler code, widely supported across modern browsers, and no need for additional libraries or polyfills.
	+ Cons: Creates two separate arrays (keys and values) which can be memory-intensive, especially for large objects.

**Library usage**

There is no explicit library mentioned in the benchmark definition. However, it's likely that both approaches rely on the built-in JavaScript `Object` prototype methods (`entries`, `keys`, `forEach`) or their corresponding polyfills if needed.

**Special JS feature/syntax**

The benchmark does not explicitly use any special JavaScript features or syntax, such as async/await, Promises, or modern ECMAScript proposals like arrow functions. The code is straightforward and adheres to the traditional synchronous execution model.

**Alternatives**

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

1. **`Object.keys()` with `map()`**: Instead of using `forEach()`, you can use the `map()` method to create an array of key-value pairs.
```javascript
const newObj = Object.keys(obj).map((k) => ({ [k]: obj[k] }));
```
This approach creates a new array but is still supported by most modern browsers.

2. **`Object.entries()` with `forEach()`**: Although not as efficient as using `reduce()`, you can use the `forEach()` method to iterate over the key-value pairs directly.
```javascript
const newObj = {};
Object.entries(obj).forEach((entry) => {
  newObj[entry[0]] = entry[1];
});
```
This approach is less memory-efficient than the original comparison but still viable for smaller objects.

3. **Use a library or polyfill**: If you need to support very old browsers, consider using a library like Lodash (with `pick()` and `mapValues()`) or a polyfill like `obj.keys()` polyfill.
```javascript
const _ = require('lodash');
const newObj = _.pick(obj, Object.keys(obj).map((k) => k));
```
Keep in mind that these alternatives may not be suitable for all use cases and might introduce additional dependencies.

Related benchmarks:

Object.entries + reduce VS Object.keys + forEach (fixed) (version: 0)

Iterate over object keys & values

Comparing performance of: Object.entries + reduce vs Object.keys + forEach

Created: 3 years ago by: Guest

Jump to the latest result

Object.entries + reduce

Object.keys + forEach

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