Benchmark: Object.fromEntries vs reduce vs for of

Script Preparation code:

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

Tests:

Object.fromEntries
Object.fromEntries(Object.entries(data).map((key, value) => [key, value.toString()]));
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 of
const acc = {}; for(const [k, v] of Object.entries(data)) { 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)
for of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.fromEntries	187.1 Ops/sec
Reduce (reuse object)	410.9 Ops/sec
Reduce (creating temporary objects)	0.2 Ops/sec
for of	212.8 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 is being tested.

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

1. `Object.fromEntries`
2. `Reduce` with a reusable object
3. `Reduce` with the creation of temporary objects

**Options Compared:**

*   **Reusing an Object**: In this approach, a new object is created for each iteration and updated within itself.
*   **Creating Temporary Objects**: A separate object is created solely for the purpose of storing the results, which is then discarded.

**Pros and Cons of Each Approach:**

1.  **Object.fromEntries:**
    *   Pros:
        *   Less memory overhead due to not creating an intermediate object
        *   Possibly faster since it only involves a single function call
    *   Cons:
        *   May have a higher performance overhead due to the extra function call

2.  **Reduce (Reusing Object):**
    *   Pros:
        *   More memory efficient since it reuses the same object for each iteration
        *   Can be faster if the reduce function's accumulator is optimized
    *   Cons:
        *   May have higher performance overhead due to the need to update and reuse an object

3.  **Reduce (Creating Temporary Objects):**
    *   Pros:
        *   Possibly simpler to understand and implement, especially for developers who are not familiar with objects
    *   Cons:
        *   Higher memory overhead due to creating a new object for each iteration
        *   May be slower than the other two approaches

**Library Used:**

The benchmark does not explicitly mention any libraries, but it relies on JavaScript's built-in `Object.fromEntries`, `Array.prototype.entries`, and `Array.prototype.reduce` methods.

However, if we were to consider third-party libraries for optimizing performance in similar scenarios, some popular ones include:

*   Lodash
*   Moment.js (for date-related operations)
*   jQuery (for DOM manipulation)

**Special JS Features/Syntax:**

The benchmark uses JavaScript's arrow functions and template literals. These features are not special per se but are commonly used in modern JavaScript development to improve code readability and conciseness.

**Benchmark Preparation Code:**

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

This prepares the `data` object for testing by generating an array of 10,000 keys using `Array.from` and then spreading these keys into a new object.

**Individual Test Cases:**

Each test case measures the performance of one specific approach. They are as follows:

1.  **Object.fromEntries**: Measures the time taken to create an object from key-value pairs using `Object.fromEntries`.
2.  **Reduce (Reuse Object)**: Measures the time taken to create an object from key-value pairs using a reusable object with `Array.prototype.reduce`.
3.  **Reduce (Creating Temporary Objects)**: Measures the time taken to create an object from key-value pairs using a separate object created for each iteration with `Array.prototype.reduce`.

These test cases are designed to evaluate the performance of different approaches to creating objects from key-value pairs in JavaScript, which is a common operation in many applications.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

for of

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