Benchmark: JavaScript spread operator vs Object.assign performance again, non destructive

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world', withMore: 'Example Data', andWith: 2000 } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world', withMore: 'Example Data', andWith: 2000 } 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/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	30998330.0 Ops/sec
Using Object.assign	18369130.0 Ops/sec

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

LLMs can make mistakes. Check important info.

In the provided benchmark, two different JavaScript techniques for merging objects are compared: the **spread operator** (`...`) and the `Object.assign` method. Each approach is evaluated based on its performance in terms of execution speed, measured by the number of executions per second.

### Options Compared:

1. **Using the Spread Operator (`...`)**:
   - **Code**:
     ```javascript
     const finalObject = {
         ...firstObject,
         ...secondObject
     };
     ```
   - **Pros**:
     - **Simplicity and Readability**: The spread operator provides a clean and concise syntax, making the code easier to read and maintain.
     - **Non-destructive**: It creates a new object without affecting the original objects, which promotes immutability—a beneficial practice in modern JavaScript.
     - **Destructuring**: It can be visually clearer for developers familiar with modern JavaScript syntax.

- **Cons**:
     - **Browser Compatibility**: The spread operator is supported in ES6 (ECMAScript 2015) and later versions. For older browsers, a transpiler (e.g., Babel) may be necessary, which could add complexity.

2. **Using `Object.assign()`**:
   - **Code**:
     ```javascript
     const finalObject = Object.assign({}, firstObject, secondObject);
     ```
   - **Pros**:
     - **Broad Compatibility**: `Object.assign()` is widely supported in many JavaScript environments, including older versions of browsers.
     - **Flexibility**: It can be used for shallow copying properties across objects.

- **Cons**:
     - **Verbosity**: The syntax is more verbose compared to the spread operator, which may reduce readability.
     - **Non-Destructive Behavior**: Similar to the spread operator, it does not alter the original objects. However, the syntax can be considered less intuitive.

### Performance Results:
The benchmark results indicate that the spread operator outperforms `Object.assign` significantly:
- **Spread Operator**: 29,540,846 executions per second
- **Object.assign**: 17,277,970 executions per second

This performance difference suggests that while both methods achieve similar outcomes in merging objects, the spread operator does so more efficiently in the tested environment.

### Additional Considerations:
- **Performance Implications**: The performance of these methods may vary with different data sizes and structures. For small objects, the difference might be negligible, but as the objects grow, the efficiency of using the spread operator might become increasingly advantageous.
- **Memory Usage**: Both methods create a new object, so memory consumption should be considered, especially in applications that frequently perform object merging.

### Alternatives:
Besides the two techniques examined, other alternatives for merging objects may include:
- **Libraries/Frameworks**: Using libraries like Lodash or Ramda, which provide utility functions for deep merging and other object-handling capabilities.
- **Custom Merge Functions**: Writing a custom merging function that can handle specific needs, such as deep merging or merging with conflict resolution.

In conclusion, both the spread operator and `Object.assign()` are valid approaches for merging objects in JavaScript. The choice between them may depend on the specific use case, readability, compatibility needs, and performance demands for the particular JavaScript environment being targeted. However, the benchmark data suggests that the spread operator is currently the more performant option in the latest browsers.

Related benchmarks:

JavaScript spread operator vs Object.assign performance again, non destructive (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):