Benchmark: Object.fromEntries vs reduce vs Map (fixed Object.fromEntries)

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() }), {});
Map
Object.entries(data).reduce((acc, [k, v]) => { acc.set(k, v.toString()) return acc; }, new Map());

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

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/114.0.0.0 Safari/537.36 Edg/114.0.1823.51

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
Object.fromEntries	445.4 Ops/sec
Reduce (reuse object)	744.3 Ops/sec
Reduce (creating temporary objects)	28.1 Ops/sec
Map	802.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to create an object from entries in JavaScript is a common task, especially when optimizing code for various use cases.

**Benchmark Overview**

The provided benchmark compares four approaches:

1. `Object.fromEntries`
2. `Reduce (reuse object)`
3. `Reduce (creating temporary objects)`
4. `Map`

Each approach has its own set of trade-offs and considerations.

**Approach 1: Object.fromEntries**

`Object.fromEntries` is a relatively new method introduced in ECMAScript 2019 (ES10). It creates an object from an iterable of key-value pairs, where each pair is provided as an array with the first element being the key and the second element being the value.

**Pros:**

* Efficient: `Object.fromEntries` uses the built-in `Object.entries()` method to get the entries from the data object.
* Intuitive: The method name clearly indicates its purpose, making it easy to understand for developers familiar with JavaScript objects.

**Cons:**

* Newer browsers: Although `Object.fromEntries` is supported in ES10, older browsers may not have it implemented. Chrome 114, the benchmarked browser, has implemented it.
* Limited control: The method creates a new object without allowing direct modification of its properties.

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

This approach uses the `reduce()` method to iterate over the data entries and create an object with the same structure. To maintain the reuse of objects, the accumulator is initialized as an empty object (`{}`), and each iteration appends a new key-value pair.

**Pros:**

* Control: The developer can have more control over creating the object by modifying its properties directly.
* Reusable object: By reusing the same object instance throughout the reduction process, less memory is allocated compared to creating multiple objects.

**Cons:**

* Performance overhead: Creating a new object on each iteration of `reduce()` can lead to performance issues due to increased memory allocation and garbage collection.
* Code complexity: The approach may require more complex code to initialize and modify the accumulator object correctly.

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

Similar to Approach 2, but instead of reusing an existing object, a new one is created on each iteration of `reduce()`.

**Pros:** None notable.

**Cons:** The approach suffers from the same performance overhead and code complexity issues as Approach 2.

**Approach 4: Map**

The `Map` data structure provides efficient storage for key-value pairs. In this approach, the `Object.entries()` method is used to get the entries from the data object, which are then iterated over using a map's `forEach()` method or iterating directly on its entries.

**Pros:** Efficient iteration and direct access to key-value pairs.
* Stronger control: The developer can manipulate the map's properties as needed.

**Cons:** Additional memory allocation due to creating a new map instance, although more efficient than Approach 2 and 3 when handling large datasets.

In summary:

* `Object.fromEntries` is an efficient and intuitive approach for creating objects from entries but may be limited in older browsers.
* `Reduce (reuse object)` offers control over the object creation process but comes with potential performance overhead due to repeated object allocations.
* `Reduce (creating temporary objects)` shares the same performance issues as Approach 2.
* `Map` provides efficient iteration and direct access to key-value pairs while requiring additional memory allocation.

Other alternatives could include:

* Using other iterables, such as `Array.of()` or `new Int8Array()`, if available in older browsers.
* Creating objects using methods like `Object.assign()` or `Object.create()`.
* Considering alternative data structures like `WeakMap` for specific use cases.

Keep in mind that the choice of approach depends on the project's requirements, performance constraints, and browser support.

Related benchmarks:

Object.fromEntries vs reduce vs Map (fixed Object.fromEntries) (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

Map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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