Benchmark: testJavaScript spread operator vs Object.assign performance to merge into new object

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; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Mac OS X 10.15

View result in a separate tab

Using Object.assign

31.9M/s

Using the spread operator

16.8M/s

View exact numbers

Test name	Executions per second
✓ Using Object.assign	31,876,466 Ops/sec
Using the spread operator	16,759,711 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON tests the performance of two different techniques for merging objects in JavaScript: using the spread operator and using `Object.assign`.

### Techniques Compared
1. **Spread Operator (`...`)**
   - **Test Case**: This approach creates a new object (`finalObject`) by using the spread syntax to expand the properties of `firstObject` and `secondObject` into a single object.
   - **Code**:
     ```javascript
     const finalObject = {
         ...firstObject,
         ...secondObject
     };
     ```

2. **Object.assign()**
   - **Test Case**: This method merges properties from `firstObject` and `secondObject` into `firstObject`, modifying it in place and returning the merged object.
   - **Code**:
     ```javascript
     const finalObject = Object.assign(firstObject, secondObject);
     ```

### Performance Results
The benchmark results show the number of executions per second for each method:
- **Using Object.assign**: 3,647,989.75 executions per second
- **Using the spread operator**: 3,291,170.0 executions per second

From these results, we can see that the `Object.assign` method performs better in this particular test case on the specified system, achieving higher execution rates.

### Pros and Cons

#### Spread Operator
- **Pros**:
  - Syntax is more modern and concise, making it easier to read and write.
  - Creates a new object, preserving the immutability of the original objects, which can be beneficial in functional programming paradigms.
- **Cons**:
  - Slightly slower than `Object.assign` in this case, indicating that it may have performance overhead, especially when merging large objects.

#### Object.assign()
- **Pros**:
  - Features better performance in this benchmark, allowing for faster merging of objects in scenarios where execution speed is critical.
  - Mutates the target object, which could be advantageous if you want to update an existing object without creating a new one.
- **Cons**:
  - Mutating the object can lead to unintended side effects, especially if the original object is still referenced elsewhere in the codebase.

### Other Considerations
- **Immutability vs. Mutation**: Choosing between these methods often depends on the need for immutability. If immutability is a requirement, the spread operator may be preferred despite its speed.
- **Browser Compatibility**: Both methods are well-supported in modern browsers, but the spread operator (`...`) was introduced in ES6 (ECMAScript 2015), while `Object.assign` is also available from ES6, making both widely usable in current web development.

### Alternatives
- **Manual Object Merging**: Developers can manually merge properties with a for-in loop, although this is usually more verbose and error-prone compared to the built-in methods.
- **Lodash's `_.merge`**: This popular utility library function deeply merges properties of objects but may come with additional overhead and should be used when deep merging is necessary.
- **Functional Programming Libraries**: Libraries such as Ramda provide utility functions for object manipulation that support immutability as a core principle.

In summary, while both the spread operator and `Object.assign` effectively merge objects, the choice of which to use can depend on performance considerations, need for immutability, and the complexity of the objects being merged.

testJavaScript spread operator vs Object.assign performance to merge into new object (version: 1)

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

Created: one year ago by: Guest

Go 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):

testJavaScript spread operator vs Object.assign performance to merge into new object (version: 1)

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

Created: one year ago by: Guest

Go 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):

Related benchmarks

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