Benchmark: JavaScript spread operator vs Object.assign vs assign to empty - performance

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);
Assign to an empty
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
Assign to an empty

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	19180750.0 Ops/sec
Using Object.assign	6387943.5 Ops/sec
Assign to an empty	5495965.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you provided tests the performance of three different methods for merging objects in JavaScript:

1. **Using the Spread Operator**: 
   ```javascript
   const finalObject = { ...firstObject, ...secondObject };
   ```
   This method utilizes the spread operator (`...`), which allows an iterable (like an array or an object) to be expanded in places where zero or more arguments or elements are expected. In this case, it is used to combine properties from `firstObject` and `secondObject` into a new `finalObject`.

**Pros**:
   - Concise and readable syntax.
   - Creates a new object, which means the original objects remain unchanged.
   - Works well with nested objects when combined with destructuring.

**Cons**:
   - Can be less performant in scenarios where large objects are involved, compared to other methods, though in most typical use cases, the performance is quite good.

2. **Using `Object.assign`**:
   ```javascript
   const finalObject = Object.assign(firstObject, secondObject);
   ```
   This method uses `Object.assign()`, which copies all enumerable own properties from one or more source objects to a target object (the first argument). Here, `firstObject` is the target and properties from `secondObject` are being copied onto it.

**Pros**:
   - Allows merging multiple objects into the first one.
   - Can be used to copy properties to existing objects, which can be useful for updates.

**Cons**:
   - Mutates the first object (`firstObject`) instead of creating a new object. This can potentially lead to side effects if the original object is expected to remain unchanged.
   - Returns the target object rather than a new object, which might not be the desired behavior in all cases.

3. **Assigning to an Empty Object**:
   ```javascript
   const finalObject = Object.assign({}, firstObject, secondObject);
   ```
   This variation of `Object.assign()` creates a new object that combines properties from `firstObject` and `secondObject`, leaving the original objects unchanged.

**Pros**:
   - Creates a new object structure, which avoids mutation, thus protecting the original data.
   - Useful for merging without side effects.

**Cons**:
   - Slightly less performant than the spread operator in many cases, though the difference may be negligible for smaller objects.
   - Still requires understanding of `Object.assign()` and how it operates with potential destructuring scenarios.

### Performance Results
The provided results show that the method using the spread operator has the highest performance in terms of `ExecutionsPerSecond`, indicating it was the fastest method in this benchmark on that specific setup. The `Object.assign` method performed significantly slower, while the "Assign to an empty" method was the slowest of the three.

### Other Considerations
- **Support for Nested Objects**: Consideration should be given on how to handle deeply nested objects, as the spread operator and `Object.assign()` only perform a shallow copy.
- **Browser Differences**: Performance may vary across different browsers and their versions due to differences in JavaScript engines.
- **Use Case**: The chosen method can depend on the specific use case, such as whether immutability is required or if performance under certain object sizes is a priority.

### Other Alternatives
- **Lodash's `_.merge()`**: This utility function merges two or more objects deeply, providing a more complex merging solution if needed.
- **Manual Merging**: Writing a custom function to iterate and merge properties if specific transformation or interactions need to occur during the merging process.

Overall, understanding these methods and their implications in terms of performance and object manipulation will help developers choose the right one suited to their needs.

Related benchmarks:

JavaScript spread operator vs Object.assign vs assign to empty - performance (version: 1)

Comparing performance of: Using the spread operator vs Using Object.assign vs Assign to an empty

Created: one month ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Assign to an empty

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