Benchmark: Object.fromEntries vs reduce vs For-Each

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() }), {});
For-each
const res = {}; Object.entries(data).forEach((key, value) => { res[key] = value; });

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-each

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.fromEntries	341.4 Ops/sec
Reduce (reuse object)	2960.0 Ops/sec
Reduce (creating temporary objects)	92.7 Ops/sec
For-each	327.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 17 days ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares four different JavaScript methods of constructing an object from an array of key-value pairs (derived from a given dataset). The dataset consists of numbers from 0 to 9999, mapped as key-value pairs in an object. Below is an analysis of the tested methods, their respective pros and cons, and other considerations.

### 1. **Object.fromEntries**

- **Benchmark Definition**: 
  ```javascript
  Object.fromEntries(Object.entries(data).map((key, value) => [key, value]));
  ```
- **Test Name**: Object.fromEntries

**Description**: This method uses `Object.entries()` to convert the `data` object into an array of key-value pairs, which is then transformed by `map`. Finally, `Object.fromEntries()` converts the array of pairs back into an object.

**Pros**:
- Concise and readable.
- Directly utilizes the capabilities of ES2019, making it an elegant solution.

**Cons**:
- Potentially less performant than more optimized methods, especially with larger datasets, due to overhead from `map()`.

### 2. **Reduce (reuse object)**

- **Benchmark Definition**: 
  ```javascript
  Object.entries(data).reduce((acc, [k, v]) => {
    acc[k] = v.toString();
    return acc;
  }, {});
  ```
- **Test Name**: Reduce (reuse object)

**Description**: This approach uses `reduce()` to iterate over the key-value pairs from `Object.entries()`, reusing the accumulator object (`acc`) to build the final result.

**Pros**:
- Efficient in memory usage by reusing the same object instead of creating new ones.
- Generally faster due to reduced overhead in object creation.

**Cons**:
- Slightly more complex code than `Object.fromEntries()`, which may impact readability for those unfamiliar with `reduce()`.

### 3. **Reduce (creating temporary objects)**

- **Benchmark Definition**:
  ```javascript
  Object.entries(data).reduce((acc, [k, v]) => ({
    ...acc,
    [k]: v.toString()
  }), {});
  ```
- **Test Name**: Reduce (creating temporary objects)

**Description**: Similar to the previous reduce method, but it uses the spread operator (`...`) to create new objects for each iteration, effectively generating a new object based on the existing one.

**Pros**:
- The syntax can be attractive as it preserves immutability in functional programming contexts.

**Cons**:
- Significant overhead due to the creation of new objects on each iteration, which can severely impact performance, especially with larger datasets. This method was the slowest in this benchmark.

### 4. **For-each**

- **Benchmark Definition**:
  ```javascript
  const res = {};
  Object.entries(data).forEach((key, value) => {
    res[key] = value;
  });
  ```
- **Test Name**: For-each

**Description**: This method initializes an empty object and uses `forEach()` to iterate through `Object.entries()`, populating the result object.

**Pros**:
- Intuitive and straightforward for developers familiar with iterative processes.
- Highly readable and simple to understand for those new to JavaScript.

**Cons**:
- Less functional and can be less performant than the `reduce()` method since it doesn't leverage the accumulator pattern and might be slower due to individual property assignments.

### Performance Results

According to the benchmark results:

- **Reduce (reuse object)** demonstrated the best performance with **2960.03 executions per second**.
- **Object.fromEntries** had a relatively poor performance of **341.41 executions per second**, mainly due to the overhead of both `map()` and `fromEntries()`.
- **For-each** was slightly slower than `Object.fromEntries` at **327.88 executions per second**.
- **Reduce (creating temporary objects)** was the slowest method with only **92.66 executions per second** due to its inefficiency in object creation during each iteration.

### Other Considerations

- **Readability vs. Performance**: While clean and modern syntax is valuable, performance can be critical based on the context. For large datasets, selecting the optimal method could greatly influence application efficiency.
- **Browser Variability**: Performance can vary between different browsers and systems, so benchmarks should be run in the specific environments where an application is intended to run.
- Additional alternatives could include using libraries like **Lodash** for utility functions that may provide optimized methods for merging objects or manipulating collections, though they add external dependencies.

Overall, understanding the trade-offs between readability and performance aids in selecting the best methodology for constructing objects from key-value pairs in JavaScript.

Related benchmarks:

Object.fromEntries vs reduce vs For-Each (version: 1)

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

Created: 18 days ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Reduce (creating temporary objects)

For-each

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 17 days ago):