Benchmark: Object.fromEntries vs reduce vs Map edited

Script Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

Reduce (reuse object)

2K/s

Map

1K/s

Reduce (creating temporary objects)

92/s

Fastest: Reduce (reuse object) (25.5x faster)

View exact numbers

✓ Reduce (reuse object): 2,351 ops/sec
• Map: 1,011 ops/sec
• Reduce (creating temporary objects): 92 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
Reduce (reuse object)
Reduce (creating temporary objects)
Map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 days ago)

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

Browser/OS: Chrome 152 on Mac OS X 10.15.7

View result in a separate tab

Reduce (reuse object)

2K/s

Map

902/s

Reduce (creating temporary objects)

92/s

View exact numbers

Test name	Executions per second
✓ Reduce (reuse object)	2,351 Ops/sec
Map	902 Ops/sec
Reduce (creating temporary objects)	92 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is tested?**

The provided JSON represents a JavaScript microbenchmark that compares three approaches to transform an object created from an array of keys and values. The three approaches are:

1.  **Object.fromEntries**: A modern JavaScript method introduced in ECMAScript 2015 (ES6) that creates an object from an array of key-value pairs.
2.  **Reduce with creating temporary objects**: This approach uses the `reduce()` method to iterate over the array of keys and values, creating a new object by concatenating or formatting string representations of each value in memory.
3.  **Map**: A built-in JavaScript data structure that can be used as an object, allowing you to store key-value pairs.

**Comparison**

The test cases compare these three approaches:

*   **Reduce (reuse object)**: Creates a new object and iterates over the array of keys and values using `reduce()`. It creates temporary objects for each value.
*   **Reduce (creating temporary objects)**: Similar to the previous approach but concatenates or formats string representations of each value directly in memory without creating intermediate objects.
*   **Map**: Uses a `Map` data structure to store key-value pairs and iterates over the array using its `forEach()` method.

**Pros and Cons**

Here's an overview of each approach:

1.  **Object.fromEntries**:
    *   Pros: Efficient, readable, and modern way to create objects from arrays.
    *   Cons: Requires JavaScript version that supports ES6 features (ECMAScript 2015 or later).
2.  **Reduce with creating temporary objects**:
    *   Pros: Works in older JavaScript versions that don't support `Object.fromEntries`. Can be efficient for simple transformations.
    *   Cons: May lead to memory issues if the array of values is large, as it requires creating and storing intermediate objects in memory.
3.  **Map**:
    *   Pros: More flexible than traditional object creation methods since you can use a `Map` data structure to store key-value pairs and easily iterate over them using various methods like `forEach()` or `entries()`.
    *   Cons: May be less readable for complex transformations compared to other approaches.

**Special JavaScript features**

This benchmark doesn't explicitly require any special JavaScript features beyond ES6 support for `Object.fromEntries`. However, it does utilize modern object creation and manipulation methods.

**Alternative approaches**

Here are some alternative approaches you might consider when transforming objects from arrays:

*   Using the spread operator (`{ ... }`) or the `Array.prototype.map()` method to create a new object based on an array of key-value pairs.
*   Leveraging libraries like Lodash, which provides utility functions for working with data structures.

Keep in mind that these alternatives might not offer performance benefits comparable to the approaches tested in this benchmark.

Object.fromEntries vs reduce vs Map edited (version: 0) Benchmark.js

Comparing performance of: `Reduce (reuse object) vs Reduce (creating temporary objects) vs Map`

Created: 2 years ago by: Guest

Go to the latest result

Reduce (reuse object)

Reduce (creating temporary objects)

Map

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 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.fromEntries vs reduce vs Map edited (version: 0) Benchmark.js

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

Created: 2 years ago by: Guest

Go to the latest result

Reduce (reuse object)

Reduce (creating temporary objects)

Map

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 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: `Reduce (reuse object) vs Reduce (creating temporary objects) vs Map`