Benchmark: JavaScript, spread operator vs Object.assign vs property setter using array as source

Tests:

Create new object using spread
const mainObject = { id1: { p1: 'id1.p1', p2: 'id1.p2', p3: { p3x1: 'id1.p3x1', p3x2: 'id1.p3x2' }, p4: [1, 2, 3, 4] }, id2: { p1: 'id2.p1', p2: 'id2.p2', p3: { p3x1: 'id2.p3x1', p3x2: 'id2.p3x2' }, p4: [1, 2, 3, 4] }, }; const objectToJoin = { id3: { p1: 'id3.p1', p2: 'id3.p2', p3: { p3x1: 'id3.p3x1', p3x2: 'id3.p3x2' }, p4: [1, 2, 3, 4] }, } const result = { ...mainObject, ...objectToJoin, };
Mutate target object with source object
const mainObject = { id1: { id: 'id1', p1: 'id1.p1', p2: 'id1.p2', p3: { p3x1: 'id1.p3x1', p3x2: 'id1.p3x2' }, p4: [1, 2, 3, 4] }, id2: { id: 'id2', p1: 'id2.p1', p2: 'id2.p2', p3: { p3x1: 'id2.p3x1', p3x2: 'id2.p3x2' }, p4: [1, 2, 3, 4] }, }; const objectToJoin = { id3: { id: 'id3', p1: 'id3.p1', p2: 'id3.p2', p3: { p3x1: 'id3.p3x1', p3x2: 'id3.p3x2' }, p4: [1, 2, 3, 4] }, } Object.assign(mainObject, objectToJoin);
Mutate target object using setter and array as object source
const mainObject = { id1: { id: 'id1', p1: 'id1.p1', p2: 'id1.p2', p3: { p3x1: 'id1.p3x1', p3x2: 'id1.p3x2' }, p4: [1, 2, 3, 4] }, id2: { id: 'id2', p1: 'id2.p1', p2: 'id2.p2', p3: { p3x1: 'id2.p3x1', p3x2: 'id2.p3x2' }, p4: [1, 2, 3, 4] }, }; const objectsToJoin = [{ id: 'id3', p1: 'id3.p1', p2: 'id3.p2', p3: { p3x1: 'id3.p3x1', p3x2: 'id3.p3x2' }, p4: [1, 2, 3, 4] }]; objectsToJoin.forEach((object) => { mainObject[object.id] = object; })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create new object using spread
Mutate target object with source object
Mutate target object using setter and array as object source

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

The benchmark measures the performance of three different ways to add a new object to an existing collection of objects:

1. **Spread operator (`...`)**: This method creates a new object by copying all the properties from `mainObject` and then merges `objectToJoin` into it using the spread operator.
2. **`Object.assign()`**: This method mutates the original `mainObject` by adding all properties from `objectToJoin`.
3. **Property setter with array as source**: This method uses a loop to iterate over an array of objects and sets each property on `mainObject` individually.

**Options being compared**

The three options are:

1. **Spread operator (`...`)**: A concise way to create a new object by copying properties from an existing object.
2. **`Object.assign()`**: A method that mutates the original object by adding properties from another object.
3. **Property setter with array as source**: A loop-based approach that sets individual properties on the target object.

**Pros and cons of each approach**

1. **Spread operator (`...`)**:
	* Pros: Concise, readable, and efficient.
	* Cons: Can be slower for large objects due to the overhead of creating a new object.
2. **`Object.assign()`**:
	* Pros: Fast, widely supported, and easy to use.
	* Cons: Mutates the original object, can lead to unexpected side effects if not used carefully.
3. **Property setter with array as source**:
	* Pros: Flexible, allows for more control over the merge process.
	* Cons: Can be slower due to the loop overhead, less readable than the spread operator or `Object.assign()`.

**Other considerations**

* The benchmark measures the performance of each approach on a specific test case involving nested objects and arrays. The results may not generalize to other use cases.
* The `DevicePlatform`, `OperatingSystem`, and `Browser` information suggests that the benchmark was run on a Windows desktop with Chrome 111 browser.

**Alternative approaches**

Other alternatives for merging objects could include:

1. **Lodash's `merge()` function**: A popular utility library provides an efficient way to merge objects.
2. **JSON Merge Patch (JMP)**: A more advanced approach that allows for more complex merge scenarios.
3. **ES6 Object Spread Operator with `for...of` loop**: An alternative implementation using a loop instead of the spread operator.

Keep in mind that these alternatives may have different performance characteristics and use cases, so it's essential to evaluate them carefully depending on your specific requirements.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Windows

View result in a separate tab

Test name	Executions per second
Create new object using spread	689489.3 Ops/sec
Mutate target object with source object	1651043.8 Ops/sec
Mutate target object using setter and array as object source	10477463.0 Ops/sec

Related benchmarks:

JavaScript, spread operator vs Object.assign vs property setter using array as source (version: 0)

Measure the fastest way to add new object into a collection of objects

Comparing performance of: Create new object using spread vs Mutate target object with source object vs Mutate target object using setter and array as object source

Created: one year ago by: Guest

Jump to the latest result

Create new object using spread

Mutate target object with source object

Mutate target object using setter and array as object source

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