Benchmark: Non-destructive Object.assign vs spread operator

Tests:

spread operator
const first = { a: 'a' } const second = { b: 'b' } const result = { ...first,...second };
Non-destructive Object.assign
const first = { a: 'a' } const second = { b: 'b' } const result = Object.assign({}, first, second);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
Non-destructive Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:99.0) Gecko/20100101 Firefox/99.0

Browser/OS: Firefox 99 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
spread operator	6664795.5 Ops/sec
Non-destructive Object.assign	8942128.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested on the provided JSON.

The benchmark is comparing two approaches for creating a new object by merging two existing objects: `Object.assign` with an object literal (non-destructive) and the spread operator (`...`).

**Non-destructive Object.assign**

This approach creates a shallow copy of the original object, where only the properties from the second object are added. The first object remains unchanged.

Pros:

* Preserves the original object's properties.
* Can be useful when you want to create a new object that doesn't modify the original.

Cons:

* Creates a new object with references to the same properties as the original object, which can lead to unexpected behavior if the original object is modified later.
* May not work correctly for nested objects or arrays.

**Spread Operator (`...`)**

This approach creates a new object by copying all properties from both objects.

Pros:

* Creates a completely new object with separate copies of each property.
* Works well for nested objects and arrays.
* Can be more efficient than `Object.assign` when dealing with large amounts of data.

Cons:

* May not preserve the original object's structure or behavior if it relies on references to the same properties.
* Requires JavaScript version 2015 or later (ECMAScript 6) to use.

In this benchmark, we have two test cases:

1. "spread operator": Tests the spread operator approach.
2. "Non-destructive Object.assign": Tests the non-destructive `Object.assign` approach.

The benchmark results show that both approaches perform similarly in Firefox 99 on a desktop Mac running macOS 10.15. However, without more context or additional tests, it's difficult to determine which approach is generally better for all use cases.

Other alternatives include:

* Using `lodash.extend()` or other utility libraries that provide their own implementation of object merging.
* Using JSON merge functions like `jsonmerge` or `immer`.
* Implementing your own custom function for object merging.

Keep in mind that the choice of approach depends on the specific requirements and constraints of your project.

Related benchmarks:

Non-destructive Object.assign vs spread operator (version: 0)

Non-destructive Object.assign vs spread operator

Comparing performance of: spread operator vs Non-destructive Object.assign

Created: 2 years ago by: Guest

Jump to the latest result

spread operator

Non-destructive Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):