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

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Using mutation

111.0M/s

Using the spread operator

62.5M/s

Using Object.assign

14.7M/s

View exact numbers

Test name	Executions per second
✓ Using mutation	110,972,104 Ops/sec
Using the spread operator	62,520,356 Ops/sec
Using Object.assign	14,741,729 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 its test cases.

**Benchmark Overview**

The benchmark compares the performance of three approaches to merge two objects in JavaScript:

1. **Spread Operator (`...`)**: This operator is used to create a new object by copying all own enumerable properties from one or more source objects into a new object.
2. **Object.assign()**: This method copies all enumerable own properties from one or more source objects to a destination object.
3. **Mutation** (using the dot notation): This approach involves directly modifying the `finalObject` by adding a property if the condition is true.

**Test Cases**

Each test case represents a different approach, and they share similar structures:

* Two sample objects (`firstObject` and `secondObject`) are defined with some data.
* A condition state (`conditionState`) is calculated based on the presence of a specific property in the `secondObject`.
* The final object (`finalObject`) is created by merging the two objects using one of the three approaches.

**Options Compared**

The benchmark compares the performance of the three approaches:

1. **Spread Operator**: Creates a new object by copying properties from `firstObject` and either `secondObject` or an empty object if the condition is false.
2. **Object.assign()**: Copies properties from `firstObject` to `finalObject`, then updates `finalObject` with the value of `conditionState && secondObject`.
3. **Mutation**: Directly modifies the `finalObject` by adding a property if the condition is true.

**Pros and Cons**

Here's a brief summary:

* **Spread Operator**:
	+ Pros: Efficient, concise, and readable.
	+ Cons: Creates a new object, which can lead to memory allocations and garbage collection overhead.
* **Object.assign()**:
	+ Pros: Well-established method, widely supported by browsers.
	+ Cons: May involve more computations (e.g., updating `finalObject` with the merged value).
* **Mutation**:
	+ Pros: Directly modifies the existing object, potentially leading to faster performance.
	+ Cons: Can be less readable and more prone to errors, as it directly alters the state.

**Libraries and Special Features**

The benchmark doesn't use any external libraries. However, it does utilize:

* **Optional Chaining (`?.`)**: A feature introduced in ECMAScript 2020 (ES11) that allows safely accessing nested properties without throwing errors.
* **Template Literals (`\r\n`)**: Used to format the code for better readability.

**Other Alternatives**

If you're looking for alternative approaches, consider:

* Using `Object.create()` to create a new object with an existing prototype.
* Utilizing `Object.freeze()` or `Object.seal()` to ensure immutability and performance.
* Leveraging modern JavaScript features like `Math.trunc()` or `BigInt` for arithmetic operations.

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and coding style preferences.

JavaScript spread operator vs Object.assign vs mutation performance with condition #3 (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 #3 (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`