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

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] }
Using iterable 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 = {} for (const key in finalObject) { finalObject[key] = firstObject[key] } if (conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } } if (conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } } if (!conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } }

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
Using iterable mutation

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	130335.4 Ops/sec
Using Object.assign	135905.5 Ops/sec
Using mutation	734098.1 Ops/sec
Using iterable mutation	306423.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and test cases.

**What is tested?**

The benchmark measures the performance of three different approaches to merge two objects: using the spread operator (`...`), `Object.assign()`, and mutation (directly accessing and assigning properties).

The test case provides a specific scenario:

* Two objects are defined: `firstObject` with 7 properties, and `secondObject` with 8 properties.
* A condition `conditionState` is evaluated based on the length of `secondObject`.
* The final object `finalObject` is constructed using one of three approaches:
	+ Using the spread operator (`...`): `{ ...firstObject, ...conditionState ? secondObject : {}, ...!conditionState ? secondObject : {} }`
	+ Using `Object.assign()`: `Object.assign(firstObject, conditionState ? secondObject : {})`
	+ Using mutation: `finalObject = {}; for (const key in finalObject) { finalObject[key] = firstObject[key]; } if (conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key]; } }`

**Performance comparison**

The benchmark results show the performance of each approach on a Chrome 108 browser, measured in executions per second. The results are:

* Using mutation: 734,098.0625 executions/second
* Using iterable mutation (for loop): 306,423.375 executions/second
* Using Object.assign(): 135,905.546875 executions/second
* Using the spread operator: 130,335.4375 executions/second

**Performance analysis**

The performance results suggest that:

* Mutation is the fastest approach, likely due to its direct access and assignment of properties.
* Iterable mutation (using for loops) is slower than mutation but faster than `Object.assign()`.
* `Object.assign()` is significantly slower than the other two approaches.

The spread operator's performance is close to iterable mutation's, which might be due to its similar algorithmic complexity.

Keep in mind that these results are specific to this test case and may not generalize to all scenarios. Additionally, the performance differences between these approaches may vary depending on the browser, device platform, operating system, and other factors.

It's worth noting that `Object.assign()` is generally considered more efficient than the spread operator because it avoids creating a new object with shallow copies of the source properties. The spread operator creates a new object with deep copies of the source properties, which can lead to performance overhead for large objects or complex data structures.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using mutation

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