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 };

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Manual copy

94.3M/s

Using the spread operator

18.5M/s

Using Object.assign

8.3M/s

Fastest: Manual copy (11.3x faster)

View exact numbers

✓ Manual copy: 94,312,768 ops/sec
• Using the spread operator: 18,482,314 ops/sec
• Using Object.assign: 8,343,180 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Windows

View result in a separate tab

Manual copy

781.8M/s

Using Object.assign

7.2M/s

Using the spread operator

3.3M/s

View exact numbers

Test name	Executions per second
✓ Manual copy	781,814,912 Ops/sec
Using Object.assign	7,186,858 Ops/sec
Using the spread operator	3,283,393 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.

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

Go to the latest result

Using the spread operator

Using Object.assign

Manual copy

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Using the spread operator

Using Object.assign

Manual copy

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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