Benchmark: JavaScript spread operator vs Object.assign vs mutation performance with condition #7

Tests:

Using the spread operator
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = { ...firstObject, ...(conditionState ? secondObject : {}), ...(conditionState ? secondObject : {}), ...(!conditionState ? secondObject : {}) };
Using Object.assign
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = Object.assign(firstObject, conditionState && secondObject, conditionState && secondObject, !conditionState && secondObject);
Using mutation
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = { a: firstObject.a, b: firstObject.b, c: firstObject.c, d: firstObject.d, e: firstObject.e, f: firstObject.f, g: firstObject.g } if (conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] } if (conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] } if (!conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using mutation

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 13; Pixel 6a) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 108 on Android

View result in a separate tab

Test name	Executions per second
Using the spread operator	159508.6 Ops/sec
Using Object.assign	154491.9 Ops/sec
Using mutation	756927.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark measures the performance of three different approaches to merge two objects in JavaScript: using the spread operator (`...`), `Object.assign()`, and mutation (directly modifying an object). The benchmark aims to determine which approach is the most efficient.

**Options Compared**

1. **Using the Spread Operator (`...`)**: This method uses the spread operator to create a new object that combines the properties of two objects.
2. **Using `Object.assign()`**: This method uses the `Object.assign()` function to merge two objects into one.
3. **Mutation (Direct Modification)**: This approach directly modifies an existing object by assigning values from another object.

**Pros and Cons**

1. **Using the Spread Operator (`...`)**:
	* Pros:
		+ Creates a new object, which can be beneficial for immutability and caching.
		+ Can be more readable and concise in some cases.
	* Cons:
		+ May create unnecessary allocations on the heap.
		+ Can be slower than other approaches due to the overhead of creating a new object.
2. **Using `Object.assign()`**:
	* Pros:
		+ Can be faster than using the spread operator, as it avoids creating a new object.
	* Cons:
		+ May modify the original object if not used carefully (e.g., with `this` context).
		+ Can have performance issues with very large objects due to deep copying.
3. **Mutation (Direct Modification)**:
	* Pros:
		+ Can be faster than other approaches, as it avoids creating a new object.
	* Cons:
		+ Modifies the original object, which can lead to unexpected behavior if not expected.
		+ Can have performance issues due to the overhead of property assignment.

**Other Considerations**

* **Immutability**: Using the spread operator or `Object.assign()` with an empty object (`{}`) ensures immutability, as a new object is created. Mutation can lead to unexpected behavior if the original object is modified.
* **Performance**: The choice of approach affects performance, particularly for large objects. `Object.assign()` might be faster than using the spread operator, but at the cost of modifying the original object.

**Library and Special JS Features**

No special JavaScript features or libraries are used in this benchmark. However, it's worth noting that modern browsers like Chrome often have optimized implementations of these methods, which can affect performance.

**Benchmark Results**

The latest benchmark results show that:

* **Mutation**: The fastest approach, with an execution rate of 756927.75 executions per second.
* **Using the Spread Operator (`...`)**: The middle approach, with an execution rate of 159508.578125 executions per second.
* **Using `Object.assign()`**: The slowest approach, with an execution rate of 154491.921875 executions per second.

Keep in mind that these results may vary depending on the specific use case and environment.

Related benchmarks:

JavaScript spread operator vs Object.assign vs mutation performance with condition #7 (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Using mutation

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using mutation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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