Benchmark: JavaScript spread operator vs Object.assign performance (updated)

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: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36 EdgA/131.0.0.0

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
Using the spread operator	8975583.0 Ops/sec
Using Object.assign	6892639.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you've provided compares the performance of two different methods for merging objects in JavaScript: the spread operator (`...`) and the `Object.assign()` method.

### Options Compared

1. **Using the Spread Operator**:
   - **Benchmark Definition**:
     ```javascript
     const firstObject = { sampleData: 'Hello world' }
     const secondObject = { moreData: 'foo bar' }
     const finalObject = {
         ...firstObject,
         ...secondObject
     };
     ```
   - **Test Name**: "Using the spread operator"

2. **Using Object.assign()**:
   - **Benchmark Definition**:
     ```javascript
     const firstObject = { sampleData: 'Hello world' }
     const secondObject = { moreData: 'foo bar' }
     const finalObject = Object.assign({}, firstObject, secondObject);
     ```
   - **Test Name**: "Using Object.assign"

### Pros and Cons of Each Approach

#### Spread Operator
- **Pros**:
  - More concise and readable syntax, making the code easier to understand at a glance.
  - Can combine multiple objects flexibly.
- **Cons**:
  - Potentially less performant in some older environments, although modern JavaScript engines have optimized it well.
  
#### Object.assign()
- **Pros**:
  - Explicitly indicates that you are copying properties from one or more source objects to a target object.
  - Some may find it more familiar or standard, especially in older JavaScript contexts.
- **Cons**:
  - Verbose syntax compared to the spread operator.
  - Returns the target object, which can lead to confusion if not properly understood, especially if no empty object is provided as the first argument.

### Other Considerations
Choosing between the spread operator and `Object.assign()` can depend on factors such as:
- **Readability and Maintainability**: If code readability is a priority, the spread operator might be preferred as it simplifies object merging.
- **Performance**: As shown in the benchmark results, the spread operator performed significantly better with 8,975,583 executions per second compared to `Object.assign()`'s 6,892,639 executions per second when run on Chrome Mobile 131. This indicates that in modern environments, the spread operator is likely to be more optimized.
- **Browser Support**: The spread operator was introduced in ES2015 (ES6), so compatibility should be checked when targeting older browsers. `Object.assign()` was also introduced in ES2015, but both methods are widely supported in contemporary JavaScript environments.

### Alternatives
- **Manual Merging**: You can manually loop through the properties of each object and assign them to a new object. This can be less efficient and more verbose:
  ```javascript
  const finalObject = {};
  for (let key in firstObject) {
      finalObject[key] = firstObject[key];
  }
  for (let key in secondObject) {
      finalObject[key] = secondObject[key];
  }
  ```

- **Lodash Merge**: If you require deep merging capabilities, libraries such as Lodash provide a `_.merge()` function that handles nested objects. This provides an even more powerful alternative:
  ```javascript
  const finalObject = _.merge({}, firstObject, secondObject);
  ```

In conclusion, this benchmark illustrates the comparative performance of merging objects in JavaScript using two common techniques. The preference for one method over another can vary based on specific requirements, coding style, and performance considerations in modern JavaScript environments.

Related benchmarks:

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