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

Using mutation

242.4M/s

Using the spread operator

6.4M/s

Using Object.assign

1.7M/s

View exact numbers

Test name	Executions per second
✓ Using mutation	242,396,544 Ops/sec
Using the spread operator	6,395,856 Ops/sec
Using Object.assign	1,746,734 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.

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

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

Created: 3 years ago by: Guest

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

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

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

Created: 3 years ago by: Guest

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

Related benchmarks

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