Benchmark: JavaScript spread operator vs Object.assign performance 123456

Tests:

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

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	95068712.0 Ops/sec
Using Object.assign	41193700.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark compares the performance of two different methods for creating a new object in JavaScript: the spread operator (`...`) and the `Object.assign()` method. The outcomes are measured by the number of executions per second for each approach within a controlled environment.

### Options Compared

1. **Using the Spread Operator**:
   - **Code Example**:
     ```javascript
     const firstObject = { moreData: 'foo bar', sampleData: 'Hello world' };
     const finalObject = { ...firstObject };
     ```
   - **Performance**: In this benchmark, the spread operator achieved approximately 95,068,712 executions per second.

2. **Using `Object.assign`**:
   - **Code Example**:
     ```javascript
     const firstObject = { moreData: 'foo bar', sampleData: 'Hello world' };
     const finalObject = Object.assign({}, firstObject);
     ```
   - **Performance**: The `Object.assign()` method resulted in around 41,193,700 executions per second.

### Pros and Cons

#### Spread Operator
- **Pros**:
  - The syntax is more concise and often considered more readable, especially for developers familiar with ES6 syntax.
  - It is generally more intuitive when working with other nested objects, allowing for easier merging of multiple objects.
  
- **Cons**:
  - Older browsers (pre-ES6) do not support the spread operator, which can be a consideration for projects requiring compatibility with legacy environments.
  
#### Object.assign
- **Pros**:
  - Supported in older JavaScript environments, making it a safer choice where compatibility is essential.
  - Allows for copying properties from multiple source objects to a target object.

- **Cons**:
  - The syntax can be less clear and more verbose, which might lead to misunderstandings in how property copying works when combining multiple objects.
  - `Object.assign()` performs a shallow copy, so if you're working with nested objects, it can lead to unintended references.

### Other Considerations

When selecting between these two methods, developers should consider the target audience for their applications (browser compatibility) and their team's familiarity with modern JavaScript syntax. Performance is another key factor—in this benchmark, the spread operator exhibited significantly better performance than `Object.assign()`, which is a critical observation when developing performance-sensitive applications.

### Alternatives

- **`Array.prototype.concat` and Spread Method for Arrays**:
  While not relevant to object merging, for array operations, the spread operator can also be used in conjunction with array literals, offering similar benefits of readability and performance.

- **Using Libraries**:
  There are libraries, such as lodash's `_.merge()` or `_.assign()`, that can handle deep copies and provide additional functionality for dealing with edge cases. However, using such libraries can introduce overhead and may not be necessary for simple use cases.

When evaluating these options, it’s essential to weigh the trade-offs of performance, code readability, and compatibility to choose the right solution for your application's needs.

Related benchmarks:

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