Benchmark: JavaScript spread operator vs Object.assign vs direct member access 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);
direct member access
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { sampleData: firstObject['sampleData'], moreData: secondObject['moreData'] };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
direct member access

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	37505204.0 Ops/sec
Using Object.assign	40245532.0 Ops/sec
direct member access	143762640.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark "JavaScript spread operator vs Object.assign vs direct member access performance" tests the performance of three different approaches to merging or accessing properties from two objects in JavaScript.

### Test Cases Overview

1. **Using the Spread Operator**:
   ```javascript
   const finalObject = { ...firstObject, ...secondObject };
   ```
   - **Pros**: 
     - It's a concise and modern syntax introduced in ES6 (ECMAScript 2015).
     - Easier to read and write, especially when merging multiple objects.
   - **Cons**: 
     - In performance-sensitive scenarios, it may be slower than other methods, especially for large objects.
   - **Use Case**: Useful when easily combining multiple objects while maintaining a clear syntax.

2. **Using Object.assign**:
   ```javascript
   const finalObject = Object.assign(firstObject, secondObject);
   ```
   - **Pros**:
     - This method can be used to create a new object (by passing an empty object as the first argument).
     - It can merge properties from multiple source objects into one target object.
   - **Cons**: 
     - Less readable compared to the spread operator for multiple objects.
     - Mutates the first object if not used with an empty target, which can lead to unintended side effects.
   - **Use Case**: Useful in scenarios where compatibility with older JavaScript environments is necessary since it has been around longer.

3. **Direct Member Access**:
   ```javascript
   const finalObject = { sampleData: firstObject['sampleData'], moreData: secondObject['moreData'] };
   ```
   - **Pros**:
     - Very explicit and avoids any overhead of merging or spreading.
     - Maximum performance for known properties since it directly accesses the values.
   - **Cons**:
     - Verbose and not suitable for merging many properties or dynamic keys.
   - **Use Case**: Optimal for accessing a small, fixed number of properties from known objects.

### Benchmark Results

Based on the executions per second reported in the latest benchmark results:

- **Direct Member Access**: 112,957,080 executions/second
- **Object.assign**: 19,505,942 executions/second
- **Spread Operator**: 18,790,386 executions/second

#### Analysis of Results

- **Performance**: Direct member access outperforms both Object.assign and the spread operator significantly, emphasizing efficiency when working with a limited and known set of properties. 
- **Object.assign** and the spread operator have similar performance metrics, but both are notably slower than direct access because they involve additional processing to merge the objects.

### Other Considerations

When choosing among these methods, the primary considerations are readability, maintainability, and performance:

- If performance is critical and the properties are known, direct member access is the best choice.
- For code readability and modern development practices, the spread operator is preferred.
- Object.assign is useful when compatibility with older JavaScript versions is essential.

### Alternatives

A few alternative approaches not covered in the benchmark include:

- **Using a library** like Lodash, which provides utility functions such as `_.merge` which can be used to deeply merge objects. However, using libraries might introduce additional overhead and dependencies, which can affect performance.
- **Using destructuring** to extract properties from objects for a cleaner syntax in certain scenarios.
- **JSON methods** like `JSON.parse(JSON.stringify({...}))` to deep clone or merge objects, although this includes serialization overhead.

Each approach has its context and can be chosen based on the specific use case and requirements of your application.

Related benchmarks:

JavaScript spread operator vs Object.assign vs direct member access performance (version: 1)

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

Created: 2 months ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

direct member access

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):