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

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 8 runs

Using the spread operator

39.2M/s

Using Object.assign

29.6M/s

Fastest: Using the spread operator (1.3x faster)

View exact numbers

✓ Using the spread operator: 39,223,236 ops/sec
• Using Object.assign: 29,553,288 ops/sec

Firefox 5 runs

Using Object.assign

26.8M/s

Using the spread operator

16.8M/s

Fastest: Using Object.assign (1.6x faster)

View exact numbers

✓ Using Object.assign: 26,826,592 ops/sec
• Using the spread operator: 16,823,466 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 6 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

Using Object.assign

16.4M/s

Using the spread operator

10.6M/s

View exact numbers

Test name	Executions per second
✓ Using Object.assign	16,366,805 Ops/sec
Using the spread operator	10,608,447 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.

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

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 8 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 8 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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