Benchmark: JavaScript spread operator vs Object.assign performance vs manual copy With more complex data

Script Preparation code:

const firstObject = {
    sampleData: 'Hello world',
    key1: 'value1',
    key2: 'value 2',
    key3: 'value 3',
    keyNum1: 123456
};
const secondObject = {
    moreData: 'foo bar',
    key1: 'value1.1',
    key4: 'value4'
};

Tests:

Using the spread operator
const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const finalObject = Object.assign({}, firstObject, secondObject);
Manual copy
const finalObject = { sampleData: firstObject.sampleData, key1 : firstObject.key1, key2 : firstObject.key2, key3 : firstObject.key3, keyNum1 : firstObject.keyNum1, moreData: secondObject.moreData , key1: secondObject.key1 , key4 : secondObject.key4 };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Manual copy

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Firefox 145 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	2820048.8 Ops/sec
Using Object.assign	5906708.0 Ops/sec
Manual copy	90418864.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the JSON compares three different methods of merging two JavaScript objects:

1. **Using the Spread Operator (`...`)**
2. **Using `Object.assign`**
3. **Manual Copying**

### Test Options Compared

1. **Using the Spread Operator**
   - **Code Example:**
     ```javascript
     const finalObject = {...firstObject, ...secondObject};
     ```
   - **Pros:**
     - Concise syntax, enhancing readability.
     - It creates a shallow copy of properties from source objects into a new object.
   - **Cons:**
     - Performance may not be as optimal compared to manual copying for larger or more complex objects as seen in the results.

2. **Using `Object.assign`**
   - **Code Example:**
     ```javascript
     const finalObject = Object.assign({}, firstObject, secondObject);
     ```
   - **Pros:**
     - Similar to the spread operator, it merges properties into a new object.
     - It can be beneficial in a more functional programming style, as it explicitly states the operation being performed.
   - **Cons:**
     - Usually slower than manual copying due to additional overhead in handling object properties.

3. **Manual Copying**
   - **Code Example:**
     ```javascript
     const finalObject = {
         sampleData: firstObject.sampleData,
         key1: firstObject.key1,
         key2: firstObject.key2,
         key3: firstObject.key3,
         keyNum1: firstObject.keyNum1,
         moreData: secondObject.moreData,
         key1: secondObject.key1,
         key4: secondObject.key4
     };
     ```
   - **Pros:**
     - Fastest execution time as observed in the benchmark results.
     - Provides complete control over which properties to include or exclude.
   - **Cons:**
     - More verbose and difficult to maintain, particularly as object structures become more complex.
     - Increased potential for errors during copying, especially if the object properties change.

### Benchmark Results Summary
The benchmark results indicate the following executions per second:
- **Manual Copy:** 175,438,720 executions/sec (fastest)
- **Using `Object.assign`:** 16,621,261 executions/sec
- **Using the Spread Operator:** 5,813,239.5 executions/sec (slowest)

### Other Considerations
- **Readability vs. Performance:** While the spread operator and `Object.assign` promote code readability, they come at a cost in performance, especially for larger objects. In contrast, manual copy might be less readable, but provides superior performance.
- **Use Cases:** 
  - Use the spread operator or `Object.assign` for smaller objects or when code clarity is valued more than performance.
  - Consider manual copying in performance-critical applications where merging large objects is frequent.

### Alternatives
Other possible alternatives not tested include:
- **Using Libraries:** Libraries such as `lodash` provide methods like `_.assign` or `_.merge` that offer additional features, such as deep merging of nested objects.
- **JSON Serialization:** For simple objects without methods or complex types, serializing and deserializing can be a method, although it is less efficient and more limited in functionality.

Ultimately, the choice between these methods should be guided by the specific requirements of the project, including performance needs, maintainability, and the object structure complexity.

Related benchmarks:

JavaScript spread operator vs Object.assign performance vs manual copy With more complex data (version: 1)

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

Created: one year ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Manual copy

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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