Benchmark: testJavaScript spread operator vs Object.assign performance to merge into new object

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Using the spread operator	16759711.0 Ops/sec
Using Object.assign	31876466.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON tests the performance of two different techniques for merging objects in JavaScript: using the spread operator and using `Object.assign`.

### Techniques Compared
1. **Spread Operator (`...`)**
   - **Test Case**: This approach creates a new object (`finalObject`) by using the spread syntax to expand the properties of `firstObject` and `secondObject` into a single object.
   - **Code**:
     ```javascript
     const finalObject = {
         ...firstObject,
         ...secondObject
     };
     ```

2. **Object.assign()**
   - **Test Case**: This method merges properties from `firstObject` and `secondObject` into `firstObject`, modifying it in place and returning the merged object.
   - **Code**:
     ```javascript
     const finalObject = Object.assign(firstObject, secondObject);
     ```

### Performance Results
The benchmark results show the number of executions per second for each method:
- **Using Object.assign**: 3,647,989.75 executions per second
- **Using the spread operator**: 3,291,170.0 executions per second

From these results, we can see that the `Object.assign` method performs better in this particular test case on the specified system, achieving higher execution rates.

### Pros and Cons

#### Spread Operator
- **Pros**:
  - Syntax is more modern and concise, making it easier to read and write.
  - Creates a new object, preserving the immutability of the original objects, which can be beneficial in functional programming paradigms.
- **Cons**:
  - Slightly slower than `Object.assign` in this case, indicating that it may have performance overhead, especially when merging large objects.

#### Object.assign()
- **Pros**:
  - Features better performance in this benchmark, allowing for faster merging of objects in scenarios where execution speed is critical.
  - Mutates the target object, which could be advantageous if you want to update an existing object without creating a new one.
- **Cons**:
  - Mutating the object can lead to unintended side effects, especially if the original object is still referenced elsewhere in the codebase.

### Other Considerations
- **Immutability vs. Mutation**: Choosing between these methods often depends on the need for immutability. If immutability is a requirement, the spread operator may be preferred despite its speed.
- **Browser Compatibility**: Both methods are well-supported in modern browsers, but the spread operator (`...`) was introduced in ES6 (ECMAScript 2015), while `Object.assign` is also available from ES6, making both widely usable in current web development.

### Alternatives
- **Manual Object Merging**: Developers can manually merge properties with a for-in loop, although this is usually more verbose and error-prone compared to the built-in methods.
- **Lodash's `_.merge`**: This popular utility library function deeply merges properties of objects but may come with additional overhead and should be used when deep merging is necessary.
- **Functional Programming Libraries**: Libraries such as Ramda provide utility functions for object manipulation that support immutability as a core principle.

In summary, while both the spread operator and `Object.assign` effectively merge objects, the choice of which to use can depend on performance considerations, need for immutability, and the complexity of the objects being merged.

Related benchmarks:

testJavaScript spread operator vs Object.assign performance to merge into new object (version: 1)

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

Created: one year ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):