Benchmark: JavaScript spread operator vs Object.assign vs Direct Mutation Performance

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Using mutation
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } firstObject.moreData = 'foo bar'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using mutation

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	36310520.0 Ops/sec
Using Object.assign	41399196.0 Ops/sec
Using mutation	179868448.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark under discussion is designed to evaluate the performance of three different approaches to merging or combining objects in JavaScript. These approaches are:

1. **Using the Spread Operator (`...`)**
2. **Using `Object.assign()`**
3. **Using Direct Mutation of an Object**

### Options Compared

1. **Using the Spread Operator**
   - **Benchmark Definition**: 
     ```javascript
     const firstObject = { sampleData: 'Hello world' }
     const secondObject = { moreData: 'foo bar' }
     const finalObject = { ...firstObject, ...secondObject };
     ```
   - **Pros**:
     - Clean syntax and readability.
     - Creates a shallow copy of the objects, meaning the original objects remain unchanged.
   - **Cons**:
     - Slightly slower in older JavaScript engines but generally well-optimized in modern engines.
   
2. **Using `Object.assign()`**
   - **Benchmark Definition**:
     ```javascript
     const firstObject = { sampleData: 'Hello world' }
     const secondObject = { moreData: 'foo bar' }
     const finalObject = Object.assign(firstObject, secondObject);
     ```
   - **Pros**:
     - Works with older JavaScript engines that do not support ES6 features.
     - Can target specific properties due to its mutable nature.
   - **Cons**:
     - Modifies the first object (`firstObject` in this case) because it is passed as the target; this can lead to inadvertent bugs if the original object is expected to remain unchanged.

3. **Using Mutation**
   - **Benchmark Definition**:
     ```javascript
     const firstObject = { sampleData: 'Hello world' }
     const secondObject = { moreData: 'foo bar' }
     firstObject.moreData = 'foo bar';
     ```
   - **Pros**:
     - Fastest of the three options in this test, as it directly modifies an existing object without the overhead of merging or copying operations.
   - **Cons**:
     - Mutates the original object, which can lead to side effects in the application. This approach is generally discouraged in functional programming paradigms where immutability is preferred because it can lead to bugs that are hard to trace.

### Benchmark Results

From the latest benchmark results collected, the execution speeds for each method were as follows:
- **Using mutation**: 179,868,448 executions per second.
- **Using `Object.assign()`**: 41,399,196 executions per second.
- **Using the spread operator**: 36,310,520 executions per second.

### Considerations

- **Immutability vs. Mutation**: In modern JavaScript development, particularly in frameworks like React, codebases often emphasize immutability for performance and predictability. Therefore, while mutation may be faster, it may not always be the best choice depending on the context.
- **Readability and Maintainability**: While using the spread operator offers improved readability, developers must also weigh the performance against maintainability based on the project scale.

### Alternatives

Other than these approaches, there are several alternatives for merging objects in JavaScript:

- **Lodash's `_.assign()`**: A utility library method that works similarly to `Object.assign()` but can offer more flexibility and additional features, particularly in handling deep merges.
  
- **Object Destructuring**: It allows for unpacking values from objects directly but it’s not a merging technique per se. Instead, it’s often used in conjunction with the spread operator.

Knowing the pros and cons of these different approaches enables developers to make informed decisions based on their specific needs and scenarios.

Related benchmarks:

JavaScript spread operator vs Object.assign vs Direct Mutation Performance (version: 1)

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

Created: 5 days ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using mutation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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