Benchmark: Object from array: map + Object.fromEntries vs reduce

Script Preparation code:

var array = Array.from({ length: 10001 }, (_, index) => index);

Tests:

Object.fromEntries
Object.fromEntries(array.map((n) => [`db/path/${n}`, null]));
Reduce (reuse object)
array.reduce((acc, n) => { acc[`db/path/${n}`] = null; return acc; }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
Object.fromEntries	442.7 Ops/sec
Reduce (reuse object)	755.3 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON tests two different JavaScript approaches for creating an object from an array of indices ranging from 0 to 10,000. The focus is on performance comparison between two techniques for constructing an object where the keys follow a specific pattern. Here's the breakdown of what is tested, the options compared, and other relevant considerations:

### Test Cases Overview

1. **Object.fromEntries with Array.map**
   - **Benchmark Definition**: 
     ```javascript
     Object.fromEntries(array.map((n) => [`db/path/${n}`, null]));
     ```
   - **Test Name**: Object.fromEntries
   - **Methodology**: This approach uses `Array.prototype.map()` to transform the array into an array of key-value pairs (in this case, an array of tuples where each tuple has a key formatted as a string and a value of `null`). The resulting array is then passed to `Object.fromEntries()`, which constructs an object from the key-value pairs.

2. **Array.reduce**
   - **Benchmark Definition**:
     ```javascript
     array.reduce((acc, n) => {
         acc[`db/path/${n}`] = null;
         return acc;
     }, {});
     ```
   - **Test Name**: Reduce (reuse object)
   - **Methodology**: This approach employs `Array.prototype.reduce()`, starting with an empty object (`{}`) as the accumulator. For each element in the array, it adds a new property to the accumulator object, with a key formatted similarly as in the first approach, effectively building the object directly.

### Performance Results

- **Reduce (reuse object)**: 
  - **Executions Per Second**: 755.26
- **Object.fromEntries**: 
  - **Executions Per Second**: 442.71

### Pros and Cons

#### Object.fromEntries with Array.map
- **Pros**:
  - Clearer intention: The use of `Object.fromEntries()` with mapping makes it clear that you are converting key-value pairs directly into an object.
  - Functional programming style: This approach leverages the functional programming paradigm, which can make the code cleaner and more declarative.
  
- **Cons**:
  - Performance: As observed in the benchmark, this method is slower than `reduce`, likely due to the overhead of creating an intermediate array of key-value pairs.

#### Array.reduce
- **Pros**:
  - Better performance: As indicated in the benchmark results, this method is significantly faster because it operates directly on the object without creating an intermediate array.
  - Explicit control: You have direct and explicit control over how the accumulator is built, making it easier to see and optimize.

- **Cons**:
  - More verbose: The syntax can be viewed as more complex or verbose, as it requires setting up an accumulator and managing object properties directly.
  - Less declarative: This approach is less aligned with functional programming principles and can sometimes be less readable, particularly for those not familiar with `reduce`.

### Other Considerations

- **Browser Compatibility**: Both methods are widely supported in modern browsers, but performance can vary based on specific JavaScript engine optimizations.
- **Choosing an Approach**: The choice between these two approaches depends on the specific use case. If readability and clarity are critical, `Object.fromEntries` may be preferable despite its relatively slower performance. However, if performance is a priority and the structure is straightforward, using `reduce` may be the better choice.
- **Alternatives**: Alternatives to both methods include the use of traditional `for` loops, which may offer performance benefits in certain contexts, such as when the browser's optimization engines have trouble with functional methods. For very large datasets or performance-critical code, reviewing the specific situation and profiling and optimizing could yield even better results.

In summary, this benchmark illustrates the trade-offs between modern declarative constructs and imperative code in JavaScript, showing clear performance differences while also highlighting considerations of code clarity and intent.

Related benchmarks:

Object from array: map + Object.fromEntries vs reduce (version: 1)

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

Created: 21 days ago by: Guest

Jump to the latest result

Object.fromEntries

Reduce (reuse object)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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