Benchmark: Object.fromEntries vs Array.reduce

Script Preparation code:

var data = Object.entries({ ...Array.from(Array(1000).keys()) });

Tests:

Object.fromEntries
Object.fromEntries(data);
Reduce (reuse object)
data.reduce((acc, [k, v]) => { acc[k] = v.toString(); return acc; }, {});
Reduce (creating temporary objects)
data.reduce((acc, [k, v]) => ({ ...acc, [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)

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/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.fromEntries	31906.1 Ops/sec
Reduce (reuse object)	89919.6 Ops/sec
Reduce (creating temporary objects)	8773.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark compares three different approaches to create an object from an array of key-value pairs:

1. `Object.fromEntries()`
2. Using `Array.reduce()` with an initial empty object as the accumulator
3. Using `Array.reduce()` with an initial empty object, but creating a temporary object inside the callback

**Option 1: Object.fromEntries()**

`Object.fromEntries()` is a modern JavaScript method introduced in ECMAScript 2015 (ES6). It creates a new object from an array of key-value pairs. The benchmark tests how well this method performs compared to other approaches.

Pros:

* Modern and efficient
* Easy to read and write

Cons:

* May not be supported in older browsers or versions
* Can be slower than other methods due to its inherent overhead

**Option 2: Reduce (reuse object)**

This approach uses `Array.reduce()` with an initial empty object as the accumulator. The callback function updates the accumulator object by adding new key-value pairs.

Pros:

* Efficient use of memory, as only one object is created
* Can be faster than other methods due to its incremental update pattern

Cons:

* May lead to temporary object creation inside the loop, which can impact performance
* Requires careful handling of edge cases and data types

**Option 3: Reduce (creating temporary objects)**

This approach uses `Array.reduce()` with an initial empty object, but creates a new temporary object inside the callback. This approach is similar to the previous one but adds an extra layer of complexity.

Pros:

* Can be more readable due to the explicit creation of a new object
* May help with debugging and understanding the code flow

Cons:

* Temporarily creates multiple objects, which can impact performance
* Increased memory usage compared to reusing an object

**Other Considerations**

When benchmarking these approaches, it's essential to consider factors like:

* Data size: Larger datasets can affect performance.
* Browser support: Different browsers may have varying levels of support for modern features.
* Loop iterations: The number of iterations can impact performance, especially for smaller datasets.

**Alternative Approaches**

Other methods to create an object from an array of key-value pairs include:

* Using `Object.assign()` and creating a new object
* Utilizing libraries like Lodash or Underscore.js, which provide utility functions for working with objects and arrays.
* Implementing custom logic using a loop and conditional statements.

Keep in mind that the choice of approach depends on the specific use case, performance requirements, and personal preference.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

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