Benchmark: Object.fromEntries vs reduce fork

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).map(([key, value]) => [key, value.toString()]).reduce((acc, [k, v]) => { acc[k] = v; return acc; }, {});
Reduce (map in reducer)
Object.entries(data).reduce((acc, [k, v]) => { acc[k] = v.toString(); return acc }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.fromEntries
Reduce (reuse object)
Reduce (map in reducer)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Object.fromEntries	2008.6 Ops/sec
Reduce (reuse object)	1925.4 Ops/sec
Reduce (map in reducer)	2423.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark you've shared tests different approaches to converting an object to another object where each value is transformed into a string. Specifically, it compares three distinct methods using JavaScript:

### Approaches Compared

1. **Object.fromEntries with map**:
   ```javascript
   Object.fromEntries(Object.entries(data).map(([key, value]) => [key, value.toString()]));
   ```
   - **Description**: This method first converts the object into an array of key-value pairs using `Object.entries()`, then maps over that array to transform each value to a string, and finally constructs a new object from the transformed array using `Object.fromEntries()`.
   - **Pros**:
     - Readable and declarative.
     - Directly leverages built-in methods introduced in ES2019.
   - **Cons**:
     - May have overhead due to the array creation and the additional mapping step.

2. **Reduce with reused object**:
   ```javascript
   Object.entries(data).map(([key, value]) => [key, value.toString()]).reduce((acc, [k, v]) => {
     acc[k] = v;
     return acc;
   }, {});
   ```
   - **Description**: This approach first maps the entries to convert the values to strings and then uses `reduce` to accumulate them into a new object.
   - **Pros**:
     - Similar readability to the first approach.
     - Explicitly manages the accumulation, which can be clearer in terms of intent.
   - **Cons**:
     - Sequential processing could influence performance due to the dual pass (map then reduce).

3. **Reduce with mapping in reducer**:
   ```javascript
   Object.entries(data).reduce((acc, [k, v]) => {
     acc[k] = v.toString();
     return acc;
   }, {});
   ```
   - **Description**: This method processes `Object.entries()` in a single pass through the `reduce` function, transforming values to strings as they are accumulated.
   - **Pros**:
     - Most efficient in terms of iterations since it performs the mapping and accumulation in one step.
     - Less memory overhead, as no intermediate array is created.
   - **Cons**:
     - Slightly less explicit in intent compared to using `map`, which could impact readability for some.

### Results Summary
From the benchmark results, the performance of the three approaches can be summarized as follows:
- **Reduce (map in reducer)**: 2423.94 executions per second (fastest)
- **Object.fromEntries**: 2008.55 executions per second
- **Reduce (reuse object)**: 1925.40 executions per second (slowest)

### Considerations
- **Performance**: The results suggest that the `reduce` method with mapping in the reducer is the most efficient. However, performance can vary based on the JavaScript engine and the size of the input object.
- **Readability vs. Performance**: While performance is important, it should be balanced with code readability. The `Object.fromEntries` method is the most readable and declarative, making it easier for others to understand.
- **Browser Compatibility**: Ensure that your target audience's browsers support the ES2019 features, such as `Object.fromEntries` and arrow functions.

### Alternatives
- You could also consider using a simple `for...in` loop as a way to transform the values manually. This would provide a balance between performance and readability, though at the expense of using modern syntax:

```javascript
   const newObj = {};
   for (const key in data) {
     newObj[key] = data[key].toString();
   }
   ```

This alternative can be advantageous because it is familiar to many JavaScript developers and can sometimes yield better performance in specific engines. However, it sacrifices some of the functional programming benefits that make methods like `map` and `reduce` attractive in modern JavaScript.

Related benchmarks:

Object.fromEntries vs reduce fork (version: 0)

Comparing performance of: Object.fromEntries vs Reduce (reuse object) vs Reduce (map in reducer)

Created: 2 months ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (map in reducer)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):