Benchmark: Array.reduce vs. Object.fromEntries + Array.map

Script Preparation code:

var data = Array.from(new Array(1000), (_, index) => ({
    type: `prop${index}`,
    result: index
}));

Tests:

Array.reduce
data.reduce((acc, { type, result }) => { return { ...acc, [type]: result } })
Object.fromEntries + Array.map
Object.fromEntries(data.map(({ type, result }) => [type, result]));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.reduce
Object.fromEntries + Array.map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Browser/OS: Firefox 90 on Ubuntu

View result in a separate tab

Test name	Executions per second
Array.reduce	10.1 Ops/sec
Object.fromEntries + Array.map	1595.3 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 definition and test cases to understand what is being tested.

**Benchmark Definition**

The website `MeasureThat.net` provides a JSON representation of the benchmark, which defines two test cases:

* "Array.reduce vs. Object.fromEntries + Array.map"
* Two individual test cases: "Array.reduce" and "Object.fromEntries + Array.map"

**Script Preparation Code**

The script preparation code for both test cases is identical:
```javascript
var data = Array.from(new Array(1000), (_, index) => ({\r\n    type: `prop${index}`,\r\n    result: index\r\n}));
```
This code creates an array of 1000 objects, where each object has a `type` property and a `result` property.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark only tests JavaScript execution time.

**Individual Test Cases**

The two individual test cases are:

1. "Array.reduce"
```javascript
data.reduce((acc, { type, result }) => {\r\n\treturn { ...acc, [type]: result }\r\n})
```
This test case uses the `Array.prototype.reduce()` method to process the `data` array.

2. "Object.fromEntries + Array.map"
```javascript
Object.fromEntries(data.map(({ type, result }) => [type, result]))
```
This test case uses the `Object.fromEntries()` method and the `Array.prototype.map()` method to process the `data` array.

**Options being compared**

The two test cases are comparing the performance of:

* `Array.prototype.reduce()` vs. a combination of `Object.fromEntries()` and `Array.prototype.map()`

**Pros and Cons of each approach**

1. **Array.prototype.reduce()**
	* Pros:
		+ Efficient for small to medium-sized arrays.
		+ Can be more intuitive for developers familiar with accumulator-based functions.
	* Cons:
		+ May be slower for large arrays due to the overhead of function calls.
		+ Can be less readable for complex data processing tasks.
2. **Object.fromEntries() + Array.prototype.map()**
	* Pros:
		+ Faster for large arrays due to the use of a specialized `fromEntries()` method, which is optimized for performance.
		+ More readable for developers familiar with object creation and array mapping.
	* Cons:
		+ May require additional imports (e.g., `Object.fromEntries()`) in some environments.
		+ Can be less intuitive for developers unfamiliar with these methods.

**Library usage**

The test case "Object.fromEntries + Array.map" uses the following libraries:

1. `Object.fromEntries()`: a built-in method introduced in ECMAScript 2017 (ES7), which creates an object from key-value pairs.
2. `Array.prototype.map()`: a built-in method that creates a new array with the results of applying a provided function to each element of the original array.

**Special JS feature or syntax**

There is no special JavaScript feature or syntax mentioned in this benchmark. However, note that `Object.fromEntries()` and `Array.prototype.map()` are examples of modern JavaScript features (ES7+), which may not be supported by older browsers or environments.

**Other alternatives**

If the developers want to explore other approaches, they could consider:

1. **Destructuring assignment**: instead of using an object with `type` and `result` properties, they could use destructuring assignment to extract the values directly.
```javascript
data.reduce((acc, ({ type, result }) => {\r\n\treturn { ...acc, [type]: result }\r\n}), {})
```
2. **Using a library like Lodash**: Lodash provides a `reduce()` function that can be used instead of the built-in `Array.prototype.reduce()`.
```javascript
const _ = require('lodash');
data.reduce(_.partialRight(_.assign, {}))
```

These alternatives may offer different trade-offs in terms of performance, readability, and compatibility with older environments.

Related benchmarks:

Array.reduce vs. Object.fromEntries + Array.map (version: 0)

Comparing performance of: Array.reduce vs Object.fromEntries + Array.map

Created: 3 years ago by: Registered User

Jump to the latest result

Array.reduce

Object.fromEntries + Array.map

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