Benchmark: Object.assign vs destructuring again

Script Preparation code:

const obj = { one: 'one' };

Tests:

Object.assign
const res = Object.assign(obj, { toString: function() { return this.one; }});
Destructuring
const res = {...obj, toString: function() { return this.one; }};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
Destructuring

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:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Object.assign	21209232.0 Ops/sec
Destructuring	13726364.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark titled "Object.assign vs destructuring again" aims to compare two JavaScript approaches for merging objects and adding new properties: using `Object.assign()` and the spread syntax (`...`).

### Approaches Being Compared

1. **Object.assign**
   - **Benchmark Definition**: 
     ```javascript
     const res = Object.assign(obj, { toString: function() { return this.one; }});
     ```
   - **Test Name**: "Object.assign"
   - **Description**:
     - `Object.assign()` is a built-in method that copies the values of all enumerable own properties from one or more source objects to a target object. In this case, it takes an existing object `obj` and adds a new property `toString` to it, which is a function that returns the value of `this.one`.
     
2. **Destructuring (with spread)**
   - **Benchmark Definition**:
     ```javascript
     const res = {...obj, toString: function() { return this.one; }};
     ```
   - **Test Name**: "Destructuring"
   - **Description**:
     - The spread syntax (`...`) allows an iterable (like an object) to be expanded in places where zero or more elements are expected. This syntax creates a new object, incorporating all properties from `obj` and adding a new `toString` function.

### Pros and Cons

#### Object.assign
- **Pros**:
  - Directly modifies the target object, which might be desirable in certain scenarios.
  - Simplicity in terms of syntax for copying properties.
  
- **Cons**:
  - Can lead to mutation of the original object if not used carefully (since it's modifying `obj` directly).
  - Less efficient in terms of performance when merging multiple objects due to its nature of performing more operations.

#### Destructuring (Spread Syntax)
- **Pros**:
  - Creates a new object, which is a more functional programming approach that avoids side effects and mutations to existing objects.
  - Generally more concise and easier to read, especially for combining multiple objects.

- **Cons**:
  - Can be slightly less performant compared to `Object.assign()` in specific cases, as it creates a new object rather than modifying an existing one.
  - When dealing with very large objects or when merging many objects, the performance cost can be higher due to the copy.

### Benchmark Results
- The benchmark results show that `Object.assign` resulted in **21,209,232 executions per second**, while the destructuring approach had **13,726,364 executions per second** in Firefox. This indicates that, at least in this context and environment, `Object.assign` was significantly faster.

### Other Considerations
- Performance may vary across different browsers and environments. The benchmark was conducted on Firefox 136 on macOS, so results might differ when tested in other browsers or platforms.
- Similar benchmarks in other contexts might yield different results based on the size of the objects being merged, the number of properties, and the overall complexity of the added functions.

### Alternatives
Other alternatives for merging or combining objects in JavaScript include:
- **Using `Object.entries()` / `Object.fromEntries()`**: It can be used to merge key-value pairs with more control, but involves more steps.
- **Lodash's `_.merge()`**: A utility library that can deeply merge objects but may introduce additional overhead.
- **ES6 classes with inheritance**: For scenarios where behavior and structure are essential, creating a class might be better suited than object merging.

This benchmark provides a practical insight into the performance trade-offs between two common methodologies for object merging in JavaScript.

Related benchmarks:

Object.assign vs destructuring again (version: 1)

Comparing performance of: Object.assign vs Destructuring

Created: one year ago by: Guest

Jump to the latest result

Object.assign

Destructuring

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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