Benchmark: JavaScript spread operator vs Object.assign performance (clone)

Tests:

Using the spread operator
const firstObject = { a: 1, b: 2, c: 3, d: 4 } const finalObject = { ...firstObject };
Using Object.assign
const firstObject = { a: 1, b: 2, c: 3, d: 4 } const finalObject = Object.assign({}, firstObject);

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: 9 months ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	71814456.0 Ops/sec
Using Object.assign	53344360.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 provided JSON evaluates the performance of two different JavaScript approaches for cloning an object: using the spread operator and using `Object.assign`. The benchmark specifically compares the execution speed of these two methods under the same conditions.

### Test Options Compared:

1. **Using the spread operator (`...`)**:
   - **Benchmark Definition**: 
     ```javascript
     const firstObject = { a: 1, b: 2, c: 3, d: 4 };
     const finalObject = { ...firstObject };
     ```
   - **Test Name**: "Using the spread operator"
   - **Performance**: 
     - Executions per second: 52,045,312.0

2. **Using `Object.assign`**:
   - **Benchmark Definition**:
     ```javascript
     const firstObject = { a: 1, b: 2, c: 3, d: 4 };
     const finalObject = Object.assign({}, firstObject);
     ```
   - **Test Name**: "Using Object.assign"
   - **Performance**:
     - Executions per second: 36,823,560.0

### Pros and Cons of Each Approach:

#### Spread Operator (`...`):
- **Pros**:
  - Generally more concise and cleaner syntax, which improves readability.
  - Easier to use in expressions or when combining multiple objects.
- **Cons**:
  - In older browser versions (ES6 and earlier), the spread operator is not supported.
  
#### `Object.assign`:
- **Pros**:
  - It works on all modern browsers and allows for cloning objects including merge capabilities.
- **Cons**:
  - Slightly more verbose than the spread syntax and may be less readable.
  - It can be less performant as shown in the benchmark; this may be due to additional internal processing associated with `Object.assign`.

### Other Considerations:
- **Readability and Maintainability**: The choice between the two can be influenced by team coding standards and the importance placed on code readability.
- **Browser Compatibility**: If supporting older browsers is a requirement, using `Object.assign` would be a more compatible choice. However, most modern projects focus on ES6 features.
- **Immutability**: Both methods create shallow copies of an object. If the object has nested properties, neither approach will clone the nested objects. This could lead to bugs if the original object is modified later.

### Alternatives:
- **Manual Cloning**: One can also manually copy properties from one object to another using traditional methods, though this is generally not recommended due to increased complexity and potential errors.
- **Using Libraries**: Libraries such as Lodash offer methods like `_.cloneDeep` for deep cloning, which can handle nested objects. However, this comes with increased overhead and should be used when necessary.

Overall, the result of the benchmark indicates that the spread operator is not only more elegant but also a faster choice for cloning objects in JavaScript in the tested environment (Chrome 131). This performance difference is significant to consider when deciding which method to use in development.

Related benchmarks:

JavaScript spread operator vs Object.assign performance (clone) (version: 1)

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

Created: one year ago by: Guest

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