Benchmark: [] spread vs mutation vs Object.assign for reduce callback

Tests:

with spread operator
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } range(0, 10000).reduce((acc, num) => { return { ...acc, [num]: num } }, {})
with mutation
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } range(0, 10000).reduce((acc, num) => { acc[num] = num return acc }, {})
with object assign
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } range(0, 10000).reduce((acc, num) => { return Object.assign(acc, {[num]: num}) }, {})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
with spread operator
with mutation
with object assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
with spread operator	129.5 Ops/sec
with mutation	16887.0 Ops/sec
with object assign	408.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark tests the performance of three different approaches for constructing an object while processing a range of numbers from 0 to 9999 using the `reduce` method. The methods being compared are:

1. **Using the Spread Operator (`...`)**
2. **Using Mutation (Directly modifying the accumulator)**
3. **Using `Object.assign()`**

### 1. **Using the Spread Operator**
```javascript
range(0, 10000).reduce((acc, num) => {
  return {
    ...acc,
    [num]: num
  };
}, {});
```
- **Description**: This method utilizes the spread operator to create a new object for every iteration in the `reduce` function. It expands the contents of the existing `acc` object (accumulator) into a new object while adding the current number as a key-value pair.
  
- **Pros**:
  - Code is concise and expressive, making it easy to read.
  - Functional style that avoids side effects.
  
- **Cons**:
  - Can be inefficient as it creates a new object on every iteration, leading to increased memory usage and processing time, especially for large inputs.

### 2. **Using Mutation**
```javascript
range(0, 10000).reduce((acc, num) => {
  acc[num] = num;
  return acc;
}, {});
```
- **Description**: This approach directly modifies the `acc` object by adding new key-value pairs to it.

- **Pros**:
  - More performant since it mutates the existing object instead of creating a new one, which reduces memory overhead.
  - Better suited for scenarios where performance is critical and when the number of operations (iterations) is large.

- **Cons**:
  - It has side effects due to directly modifying the accumulator, which might lead to errors if not handled carefully.
  - Less expressive compared to the other methods, which might make it harder for some developers to understand at a glance.

### 3. **Using `Object.assign()`**
```javascript
range(0, 10000).reduce((acc, num) => {
  return Object.assign(acc, {[num]: num});
}, {});
```
- **Description**: This method uses `Object.assign()` to copy properties from a new object (with the current number as a key) into the accumulator.

- **Pros**:
  - Offers a clearer intention of merging objects.
  - Avoids some side effects associated with direct mutation as `Object.assign` can be seen as a non-destructive operation on the surface.

- **Cons**:
  - Performance-wise, it is generally slower than direct mutation, as it still involves some overhead to create a new object for each iteration.
  - Can be less readable compared to directly mutating the accumulator.

### Benchmark Results Summary
The benchmark results show the number of executions per second for each method:
- **Mutation** is the clear winner with **12,995** executions per second.
- **Object.assign()** follows with **599** executions per second.
- **Spread Operator** significantly trails with only **0.44** executions per second.

### Other Considerations
- **When to use which method**: If performance is paramount (e.g., processing a large dataset), opting for mutation is advisable. However, in cases where readability, maintainability, and avoiding side effects are more critical, using the spread operator or `Object.assign()` might be more suitable.
- **Alternatives**: Other alternatives could include using libraries like `lodash` which provides functional utilities for deep merging and cloning objects while considering performance. Moreover, utilizing modern JavaScript features such as `Map` or `Set` could also be relevant, depending on the specific requirements of the task (e.g., needing unique keys).

This benchmark illustrates the trade-offs between different JavaScript object construction techniques within a functional programming context, emphasizing the importance of selecting the right method based on use case requirements.

Related benchmarks:

[] spread vs mutation vs Object.assign for reduce callback (version: 1)

Comparing performance of: with spread operator vs with mutation vs with object assign

Created: 5 months ago by: Registered User

Jump to the latest result

with spread operator

with mutation

with object assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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