Benchmark: JavaScript spread operator vs Object.assign performance fork 619473

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 month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	2802646.2 Ops/sec
Using Object.assign	4223932.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark tests the performance of two different JavaScript techniques for merging objects: the **spread operator** (`...`) and the `Object.assign()` method. Here’s a breakdown of each approach:

### Options Compared

1. **Using the Spread Operator (`...`)**:
    ```javascript
    const finalObject = {
        ...firstObject,
        ...secondObject
    };
    ```
   - **Description**: The spread operator allows you to expand an iterable (like an array or object) into its elements. In this case, it copies the properties of `firstObject` and `secondObject` into a new object `finalObject`.
   - **Advantages**:
     - Concise and readable syntax.
     - More elegant handling of additional properties as it allows for seamless mixing of other properties or defaults in the same operation.
   - **Disadvantages**:
     - Potentially higher overhead for very large objects or a large number of merges due to the creation of an intermediate object.
     - May involve more memory copies compared to `Object.assign()` in certain scenarios.

2. **Using `Object.assign()`**:
    ```javascript
    const finalObject = Object.assign({}, firstObject, secondObject);
    ```
   - **Description**: `Object.assign()` is a method that facilitates copying properties from one or more source objects to a target object. In this scenario, an empty object is used as the target, receiving properties from `firstObject` and `secondObject`.
   - **Advantages**:
     - More control over copying by specifying the target object explicitly.
     - Traditionally, `Object.assign()` is faster for merging smaller objects or when performance is critical since it avoids some overhead of creating new objects.
   - **Disadvantages**:
     - Syntax can be more verbose and less intuitive than the spread operator.
     - If properties have the same keys, `Object.assign()` will overwrite them, which can lead to unintended data loss if not handled properly.

### Performance Considerations

Based on the benchmark results, the following insights can be drawn:
- **Results**:
  - `Using Object.assign`: 4,223,932.0 executions per second
  - `Using the spread operator`: 2,802,646.25 executions per second

It appears that `Object.assign()` outperforms the spread operator in this benchmark scenario by a considerable margin. This result could be influenced by the implementation details of JavaScript engines, particularly in Firefox 130, but it also highlights that real-world performance can vary based on the environment and the size of the objects being merged.

### Other Alternatives

Apart from the spread operator and `Object.assign()`, there are other approaches to merging objects in JavaScript, such as:
- **Using Libraries**: 
  - **Lodash or Underscore.js**: These utility libraries have methods like `_.merge()` for deep merging objects, providing additional features, like merging nested objects and arrays, though with added overhead.
  
- **Object Destructuring**: Although primarily used for unpacking properties from objects, destructuring can also facilitate object merging in simpler cases with cleaner syntax.

- **Manual Merging**: For specific use cases, creating custom merging logic might be warranted for complete control over how properties are combined, although this is generally less efficient than using built-in methods.

### Conclusion

When deciding between the spread operator and `Object.assign()`, engineers should consider the specific context of their application, including performance needs and readability. While the spread operator offers a modern and concise syntax, `Object.assign()` may provide better performance in scenarios involving object merging, particularly with smaller data sets. Understanding these differences can aid in making informed choices while developing in JavaScript.

Related benchmarks:

JavaScript spread operator vs Object.assign performance fork 619473 (version: 1)

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

Created: one month ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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