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

Tests:

Using the spread operator
const firstObject = { name: 'Alice', age: 25, contact: { email: 'alice@example.com', phone: '123-456-7890', }, preferences: { language: 'English', timezone: 'UTC', }, }; const secondObject = { job: 'Software Engineer', skills: ['JavaScript', 'React', 'Node.js'], contact: { email: 'alice.work@example.com', }, preferences: { theme: 'dark mode', }, }; const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { name: 'Alice', age: 25, contact: { email: 'alice@example.com', phone: '123-456-7890', }, preferences: { language: 'English', timezone: 'UTC', }, }; const secondObject = { job: 'Software Engineer', skills: ['JavaScript', 'React', 'Node.js'], contact: { email: 'alice.work@example.com', }, preferences: { theme: 'dark mode', }, }; 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: 8 months ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:142.0) Gecko/20100101 Firefox/142.0

Browser/OS: Firefox 142 on Ubuntu

View result in a separate tab

Test name	Executions per second
Using the spread operator	557604.0 Ops/sec
Using Object.assign	1669266.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of two different methods for merging JavaScript objects: the spread operator (`...`) and the `Object.assign()` method. Both techniques are commonly used to combine properties from multiple objects into a single object, which can be a typical requirement in JavaScript programming.

### Comparison of Options

1. **Using the Spread Operator (`...`)**
   - **Implementation**:
     ```javascript
     const finalObject = {
       ...firstObject,
       ...secondObject
     };
     ```
   - **Performance**: The benchmark result shows approximately 13,793,965 executions per second for the spread operator.
   - **Pros**:
     - **Conciseness**: The syntax is cleaner and more intuitive, allowing for easier readability. 
     - **Shallow Copy**: Creates a new object by copying the properties from the source objects, minimizing the risk of accidental mutations to the original objects.
     - **Flexibility**: Supports merging properties directly in object literals.
   - **Cons**:
     - May have a slight overhead compared to `Object.assign()` in certain scenarios, although in modern JavaScript engines, this is often negligible.

2. **Using `Object.assign()`**
   - **Implementation**:
     ```javascript
     const finalObject = Object.assign(firstObject, secondObject);
     ```
   - **Performance**: The benchmark result shows approximately 17,301,034 executions per second for `Object.assign()`.
   - **Pros**:
     - **Mutability Control**: When using `Object.assign()` with the first argument as a new object, you can avoid modifying the original objects. 
     - **Functionality**: Useful for cloning objects and also allows the option to merge properties while specifying the target object.
   - **Cons**:
     - **Verbosity**: The syntax is more verbose and may be less intuitive compared to the spread operator.
     - **Mutates the First Argument**: If not used correctly, it can lead to unintended mutations of the source objects if the first argument is not a new object.

### Considerations
- **Browser Compatibility**: The spread operator is part of ES6 (ES2015) and is well-supported in modern browsers, but may not work in older environments. `Object.assign()` is also part of ES6 and faces similar support issues.
- **Shallow vs. Deep Copy**: Both methods perform shallow copies, meaning that if your objects contain nested objects, only references to the nested objects are copied, not their contents. If deep copying is required, a different approach or library (like Lodash's `cloneDeep`) would be needed.
  
### Alternatives
1. **Lodash or Underscore.js**:
   - Libraries such as Lodash provide utility functions that can simplify object manipulation, including deep merging of objects.
   
2. **JSON methods**:
   - Using `JSON.parse(JSON.stringify(object))` can create a deep copy of an object but isn't suitable for functions, `undefined`, or circular references.

3. **Manual Merge**:
   - Writing a custom function to recursively merge objects to handle specific use cases or structures might be beneficial.

### Conclusion
The benchmark clearly indicates higher performance for `Object.assign()` in this particular case, but the choice between the spread operator and `Object.assign()` can depend on readability, use case, and personal or team preference. Understanding the pros and cons of both methods can guide engineers in selecting the appropriate approach for their specific requirement.

Related benchmarks:

JavaScript spread operator vs Object.assign performance (bigger objects) (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):