Benchmark: Object.fromEntries vs reduce vs for

Script Preparation code:

var data = { ...Array.from(Array(10000).keys()) };

Tests:

Object.fromEntries
Object.fromEntries(Object.entries(data).map((key, value) => [key, value]));
Reduce (reuse object)
Object.entries(data).reduce((acc, [k, v]) => { acc[k] = v.toString(); return acc; }, {});
Reduce (creating temporary objects)
Object.entries(data).reduce((acc, [k, v]) => ({ ...acc, [k]: v.toString() }), {});
for
const res = {}; for (const [k, v] of Object.entries(data)) { res[k] = v.toString(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.fromEntries
Reduce (reuse object)
Reduce (creating temporary objects)
for

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 124 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.fromEntries	293.9 Ops/sec
Reduce (reuse object)	3186.1 Ops/sec
Reduce (creating temporary objects)	104.6 Ops/sec
for	3276.7 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing the performance of three different approaches to create an object from an array of key-value pairs:

1. `Object.fromEntries`
2. `reduce` (with reusing the same object)
3. `for` loop

Each approach has its own pros and cons, which we'll discuss below.

**Options Compared**

* `Object.fromEntries`: a modern JavaScript method introduced in ECMAScript 2015 that creates an object from an array of key-value pairs.
* `reduce`: a method on the Array prototype that applies a function to each element in the array, reducing it to a single output value. In this case, it's used to create an object by reusing the same accumulator object.
* `for` loop: a traditional looping construct that iterates over the array and creates an object manually.

**Pros and Cons of Each Approach**

* `Object.fromEntries`:
	+ Pros: concise, efficient, and easy to read.
	+ Cons: only supported in modern browsers (ECMAScript 2015 and later), may not work in older browsers or environments.
* `reduce` (with reusing the same object):
	+ Pros: flexible, can be used for other types of array processing, and is widely supported across browsers.
	+ Cons: requires careful accumulator management to avoid memory leaks or unexpected behavior.
* `for` loop:
	+ Pros: widely supported, easy to understand, and doesn't require any special libraries.
	+ Cons: more verbose than the other two options, and may be slower due to the overhead of manual object creation.

**Library Used**

In this benchmark, no external library is used. The only custom function being compared is `Object.fromEntries`.

**Special JavaScript Features or Syntax**

None are explicitly mentioned in the provided code snippets.

**Other Considerations**

* Memory usage: All three approaches will create a new object, but `Object.fromEntries` might be more efficient due to its optimized implementation.
* Browser compatibility: As mentioned earlier, `Object.fromEntries` is only supported in modern browsers. This could affect the benchmark's results across different environments.

**Alternatives**

If you need to support older browsers or want even more flexibility with your array processing, you could consider using other methods like:

* Using `Array.prototype.forEach` and creating an object manually.
* Utilizing a library like Lodash or Ramda for functional programming constructs.
* Employing a custom implementation of the `reduce` method specifically optimized for performance.

Keep in mind that these alternatives might change the benchmark's results or complexity, so it's essential to carefully evaluate their trade-offs.

Related benchmarks:

Object.fromEntries vs reduce vs for (version: 0)

Comparing performance of: Object.fromEntries vs Reduce (reuse object) vs Reduce (creating temporary objects) vs for

Created: 4 years ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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