Benchmark: Spread vs Object.assign mutate

Script Preparation code:

window.object1 = {};
window.object2 = {};

function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
};

function populate(object) {
  for (let i = 0; i < 100; i++) {
    object[makeid()] = makeid();
  }
};

populate(object1);
populate(object2);

Tests:

Object.assign two objects
let object7 = Object.assign({}, object1); object7 = Object.assign(object7, object2);
Spread two objects
const object7 = Object.assign({}, object1); const object8 = {...object7, ...object2};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign two objects
Spread two objects

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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.assign two objects	47612.7 Ops/sec
Spread two objects	44886.8 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 investigates the performance of two different methods for merging JavaScript objects: using `Object.assign()` and the spread operator (`...`).

### Options Compared

1. **Object.assign**: 
   ```javascript
   let object7 = Object.assign({}, object1);
   object7 = Object.assign(object7, object2);
   ```
   This approach uses `Object.assign()` to merge two objects. The first call creates a new object from an empty object and `object1`. The second call then merges `object2` into the newly created object (`object7`).

2. **Spread Operator**:
   ```javascript
   const object7 = Object.assign({}, object1);
   const object8 = {...object7, ...object2};
   ```
   The second method also starts with `Object.assign()` to copy `object1` into a new object, then uses the spread operator to merge `object2` into this new object `object7`, resulting in `object8`.

### Pros and Cons

#### Object.assign
- **Pros**:
  - Supported in all modern browsers and widely compatible.
  - Useful for shallow copying properties from one or more source objects to a target object.

- **Cons**:
  - Doesn't handle deep cloning; properties that are objects themselves are copied by reference.
  - Requires more characters to type compared to the spread operator.

#### Spread Operator
- **Pros**:
  - More concise and readable syntax, which can lead to cleaner code.
  - Also performs shallow copying similar to `Object.assign()`.
  - Offers a more intuitive way to merge properties from multiple objects.

- **Cons**:
  - While supported in most modern browsers, older browsers may not support the spread operator natively (requires transpilation for compatibility).
  - Similar to `Object.assign()`, it also performs shallow copies.

### Other Considerations
- Both methods are performing shallow merges, which means that if nested objects or arrays are part of the objects being merged, they are referenced rather than copied. If deep merging is needed, developers need to implement custom logic or use libraries that support deep merging.

- This benchmark provides realistic performance insights for JavaScript developers who may need to optimize how they merge objects in their applications.

### Alternative Approaches
1. **Manual Merge**: Developers can manually assign properties from one object to another using a loop. This provides full control but can be error-prone and verbose.

2. **Libraries**:
   - **Lodash**: The `_.merge()` function can perform deep merges, which is advantageous when dealing with nested objects. However, it comes with additional overhead and may increase bundle size.
   - **Immutable.js**: If working with immutable data structures, this library provides methods for merging without mutating the original objects.

3. **Using `for...in` Loop**: Another technique is using a `for...in` loop to iterate through properties and copying them to a new object. This is more verbose and can also lead to issues with inherited properties.

In conclusion, the benchmark provides an essential comparison of two common paradigms for object merging in JavaScript, highlighting their performance characteristics while also considering their usability and limitations. This information can guide developers in choosing the right method based on their specific application context and performance requirements.

Related benchmarks:

Spread vs Object.assign mutate (version: 1)

Comparing performance of: Object.assign two objects vs Spread two objects

Created: one year ago by: Guest

Jump to the latest result

Object.assign two objects

Spread two objects

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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