Benchmark: Different ways of writing Array.reduce

Tests:

Using the spread operator
const users = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] users.reduce((x, user) => ({...x, [user.id]: user}), {});
Using Object.assign
const users = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] users.reduce((x, user) => Object.assign(x, { [user.id]: user }), {});
Returning the reference
const users = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] users.reduce((x, user) => { x[user.id] = user; return x; }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Returning the reference

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark measures three different approaches to reducing an array of objects in JavaScript, with the ultimate goal of finding the most efficient method. Here's what each option tests and their pros and cons:

1. **Using the spread operator (`...`)**:
```javascript
users.reduce((x, user) => ({...x, [user.id]: user}), {});
```
Pros: concise, readable, and efficient.

Cons: The spread operator is a relatively modern feature (introduced in ECMAScript 2018), which might not be supported by older browsers or environments. Additionally, some developers might find it less intuitive than other methods.

2. **Using `Object.assign()`**:
```javascript
users.reduce((x, user) => Object.assign(x, { [user.id]: user }), {});
```
Pros: widely supported (even in older browsers), and can be useful when working with complex objects that require multiple assignments.

Cons: This approach is often slower than the spread operator due to the overhead of function calls and object cloning. Moreover, it requires a separate call to `Object.assign()`, which might add unnecessary operations.

3. **Returning the reference**:
```javascript
users.reduce((x, user) => { x[user.id] = user; return x; }, {});
```
Pros: This approach is often considered the most efficient since it avoids creating new objects or using expensive functions like `Object.assign()`.

Cons: The code might be less readable and more prone to errors, especially for those unfamiliar with this pattern. It's also worth noting that returning the reference can lead to unintended side effects if not used carefully.

Now, regarding libraries:

* None of the benchmarked options use any external libraries. However, it's essential to note that some libraries might be used implicitly or by relying on built-in functions, such as `Object.assign()`.

As for special JavaScript features or syntax:

* The spread operator (`...`) is a relatively modern feature (ECMAScript 2018) and was not widely supported until recent browsers.
* No other special features or syntax are explicitly mentioned in the benchmarked code. However, some minor syntactical differences between the three approaches might affect readability.

When comparing these options, consider the following:

* **Concise readability**: Using the spread operator is often the most concise and readable way to reduce an array of objects.
* **Performance**: Returning the reference is typically the fastest approach since it avoids creating new objects or using expensive functions like `Object.assign()`.
* **Browser support**: When testing cross-browser compatibility, consider that older browsers might not support the spread operator. Using `Object.assign()` can help ensure wider compatibility.

Alternatives to these approaches include:

* Other array reduction methods, such as `reduceRight()`, `forEach()`, or using a `for` loop.
* Alternative data structures, like using objects with named properties (e.g., `{ [user.id]: user }`) instead of an object with dynamic properties (`{ [user.id]: user } = {};`).
* Optimizations specific to your use case, such as caching intermediate results or parallelizing the reduction process.

In summary, when choosing between these approaches, consider the trade-offs between conciseness, readability, performance, and browser support.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3602.2 Safari/537.36

Browser/OS: Chrome 72 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	1374838.1 Ops/sec
Using Object.assign	180166.2 Ops/sec
Returning the reference	2510459.8 Ops/sec

Related benchmarks:

Different ways of writing Array.reduce (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Returning the reference

Created: 6 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Returning the reference

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):