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

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const conditionState = !!secondObject?.moreData const finalObject = { ...firstObject, ...(conditionState ? secondObject : {}) };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const conditionState = !!secondObject?.moreData const finalObject = Object.assign(firstObject, conditionState && secondObject);
Using mutation
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const conditionState = !!secondObject?.moreData const finalObject = { sampleData: firstObject.sampleData } if (conditionState) { finalObject.moreData = secondObject.moreData }

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 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 117 on Android

View result in a separate tab

Test name	Executions per second
Using the spread operator	6395856.5 Ops/sec
Using Object.assign	1746733.6 Ops/sec
Using mutation	242396544.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of three approaches when creating a new object:

1. **Spread Operator (Object Spread)**: Using the spread operator (`...`) to merge two objects.
2. **Object.assign**: Using the `Object.assign()` method to merge two objects.
3. **Mutation**: Modifying an existing object by adding or replacing properties.

**Options Compared**

The benchmark compares the performance of these three approaches on a specific test case, which creates two sample objects and uses a conditional statement to decide whether to add properties from one object to another. The options being compared are:

* Spread Operator (Object Spread)
	+ Pros: Efficient, concise syntax, flexible.
	+ Cons: Can be slower for very large objects due to the overhead of creating a new array of property names.
* Object.assign
	+ Pros: Well-established method, widely supported, can handle large objects efficiently.
	+ Cons: Syntax can be verbose and less readable than spread operator.
* Mutation (Direct Property Assignment)
	+ Pros: Fastest approach, least memory overhead.
	+ Cons: Less efficient for complex objects with many properties.

**Other Considerations**

The benchmark also considers the device platform (Mobile) and browser version (Chrome 117). This suggests that the test may be targeting a mobile-specific scenario or a specific set of browsers.

**Library/Function Used**

* `Object.assign()`: A built-in JavaScript function that merges two objects into one. It's widely supported across browsers and environments.
* Spread Operator (`...`): Introduced in ECMAScript 2015, this operator allows for more concise syntax when merging objects.

**Special JS Feature/Syntax**

* The use of the optional chaining operator (`?.`) is present in the benchmark definitions, but not explicitly used in the test code. This feature was introduced in ECMAScript 2018 and allows safe navigation of nested property access.
* The spread operator uses a feature called "rest parameter" (`...`), which allows function arguments to be expanded into an array.

**Alternatives**

Other approaches for merging objects include:

* `Object.merge()` (not a standard JavaScript method): This is not a recommended approach due to its non-standard syntax and potential performance issues.
* Manual property assignment using dot notation (`obj.prop = value;`)
* Using the `reduce()` function with an accumulator object

Keep in mind that these alternatives might be less efficient or more verbose than the options being compared in this benchmark.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using mutation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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