Benchmark: JavaScript spread operator vs Object.assign (to new obj) 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);

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: 3 months ago)

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

Browser/OS: Firefox 147 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Using the spread operator	10608447.0 Ops/sec
Using Object.assign	16366805.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two methods for merging JavaScript objects: the spread operator (`...`) and the `Object.assign` method. Here’s a detailed breakdown of each part of the benchmark.

### Test Cases

1. **Using the Spread Operator**:
   ```javascript
   const firstObject = { sampleData: 'Hello world' }
   const secondObject = { moreData: 'foo bar' }
   const finalObject = {
       ...firstObject,
       ...secondObject
   };
   ```
   - **Explanation**: The spread operator `...` allows for an easy and concise way to copy properties from one object (or multiple objects) into a new object. In this case, `firstObject` and `secondObject` are merged into `finalObject`.

2. **Using Object.assign**:
   ```javascript
   const firstObject = { sampleData: 'Hello world' }
   const secondObject = { moreData: 'foo bar' }
   const finalObject = Object.assign({}, firstObject, secondObject);
   ```
   - **Explanation**: The `Object.assign` method copies properties from one or more source objects to a target object. In this case, a new empty object `{}` is the target to which properties from `firstObject` and `secondObject` are copied.

### Performance Results

- **Using the Spread Operator**:
  - **Executions Per Second**: 19,141,784.0

- **Using Object.assign**:
  - **Executions Per Second**: 13,105,905.0

### Comparison of Options

#### Pros and Cons

1. **Spread Operator**:
   - **Pros**:
     - Syntax is cleaner and more readable, which can lead to improved maintainability.
     - Creates a new object directly without the need for an explicit target object, which can make the intent of merging clearer.
   - **Cons**:
     - May be slightly less performant in some scenarios, although it is increasingly optimized in modern JavaScript engines.

2. **Object.assign**:
   - **Pros**:
     - Can be useful if you need to copy properties of multiple objects into an existing object. The target object can be something other than a new empty object.
     - Supported widely in older browsers (before ES6) where the spread operator might not be available.
   - **Cons**:
     - The syntax is more verbose, potentially making code less readable.
     - Mutates the target object if you don't create a new one, which can lead to issues if unintentional modifications occur.

#### Other Considerations
- The spread operator is part of ES6 (ECMAScript 2015) and provides a more modern approach to object merging and cloning. Thus, developers working in environments where ES5 support is sufficient may choose `Object.assign` for compatibility while newer projects often favor the spread operator for its simplicity.

### Alternatives
While the benchmark focuses on `Object.assign` and the spread operator, other ways to merge objects include:
- **Using a library**: Libraries like `Lodash` provide utility functions such as `_.merge()` which can handle deep merging and other complex scenarios.
- **Manual merging**: Developers can manually loop through properties and assign them if custom logic is required during merging.

In conclusion, both methods serve the purpose of merging objects but have different implications for performance, readability, and compatibility. The choice between them often depends on the specific requirements of the codebase and the target environment.

Related benchmarks:

JavaScript spread operator vs Object.assign (to new obj) performance (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):