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

Test name	Executions per second
Using the spread operator	62520356.0 Ops/sec
Using Object.assign	14741729.0 Ops/sec
Using mutation	110972104.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 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.

Related benchmarks:

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