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

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days 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.

Latest run results:

Run details: (Test run date: one year 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

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: one year 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 27 days ago):