Benchmark: JavaScript spread operator vs Object.assign performance -2

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

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	20297486.0 Ops/sec
Using Object.assign	18741658.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 methods for merging objects in JavaScript: the spread operator and the `Object.assign` method. Here's a detailed breakdown of the benchmark, the options being tested, their pros and cons, and other considerations.

### 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"

### Performance Results

- **Spread Operator**: 33,805,032 executions per second
- **Object.assign**: 24,739,994 executions per second

### Pros and Cons

#### Spread Operator
- **Pros**:
  - **Simplicity and readability**: The syntax is more concise and clear, making the code easier to read and maintain.
  - **Copied properties**: It creates shallow copies of the properties, which is desirable in many scenarios.
  - **Expands easily**: It allows easy merging of more than two objects by simply using additional spread syntax.

- **Cons**:
  - **Browser support**: Older browsers may not support the spread operator, though modern environments generally do.

#### Object.assign
- **Pros**:
  - **Legacy support**: It is part of the ES5 specification, making it more widely compatible with older browsers.
  - **For copying properties**: `Object.assign` is explicitly designed for copying properties to a target object, which can be useful in certain scenarios.

- **Cons**:
  - **Verbosity**: The syntax is more verbose and may be less intuitive compared to the spread operator.
  - **Base object**: Requires an empty object as the first argument to avoid modifying the original ones.
  - **Property Attribute Considerations**: It does not handle the copying of properties that are non-enumerable or symbols.

### Other Considerations
- **Performance**: The benchmark results indicate that the spread operator significantly outperforms `Object.assign` in this particular test case. This may be relevant for applications that perform many object merge operations in performance-sensitive contexts.
  
- **Usage Context**: While the choice between the spread operator and `Object.assign` can depend on the specific needs of your application, it's crucial to consider readability and long-term maintainability of the code.

### Alternatives
1. **`lodash.merge`**: A utility function from the Lodash library that merges objects recursively and supports more complex merging strategies.
2. **Object Destructuring**: While not a direct alternative for merging, destructuring can simplify object handling in JavaScript and enhance code readability.
3. **Custom Merge Functions**: For very specific object combinations, custom functions can be written to meet unique merge requirements, although this might sacrifice performance.

In summary, this benchmark provides insights into the performance differences between modern and legacy approaches to object merging in JavaScript, highlighting the spread operator's advantages in terms of speed and syntax simplicity over `Object.assign`.

Related benchmarks:

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