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

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 = 'foo bar' }

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript benchmark test case on MeasureThat.net, which compares the performance of three approaches: using the spread operator (`...`), `Object.assign`, and mutation (directly modifying an object). The test is designed to measure which approach yields the best performance.

**Benchmark Definition**

The benchmark definition is a series of test cases that demonstrate different ways to merge two objects. The test case has three variations:

1. Using the spread operator (`...`): This approach uses the `spread` syntax to create a new object that includes all properties from both `firstObject` and either `secondObject` or an empty object if the condition is false.
2. Using `Object.assign`: This approach uses the `assign` method to merge two objects, taking advantage of the nullish coalescing operator (`??`) to provide a default value when necessary.
3. Using mutation: This approach directly modifies the `firstObject` by adding or removing properties based on the condition.

**Options Comparison**

The test compares the performance of these three approaches:

* **Pros and Cons:**
	+ **Using the spread operator (`...`)**:
		- Pros: concise, readable, and efficient.
		- Cons: may not work well with deeply nested objects or complex property names.
	+ **Using `Object.assign`**:
		- Pros: widely supported, flexible, and suitable for most use cases.
		- Cons: can be slower due to the need to check for nullish values.
	+ **Using mutation**:
		- Pros: simple, fast, but may lead to unexpected behavior or side effects.
		- Cons: error-prone, difficult to maintain, and may not work well with complex logic.
* **Other Considerations:**
	+ The test also considers the impact of object references on performance. In this case, using `Object.assign` creates a new object reference, whereas the spread operator and mutation methods modify existing objects.

**Test Case Libraries**

There are no explicit libraries mentioned in the benchmark definition. However, the use of `Object.assign` suggests that the test is targeting browsers that support this method.

**Special JS Features/Syntax**

The test cases utilize several special JavaScript features:

* **Spread syntax (`...`)**: introduced in ECMAScript 2015 (ES6), allows creating new objects from existing ones.
* **Nullish coalescing operator (`??`)**: introduced in ECMAScript 2020, provides a concise way to provide default values for nullish (null or undefined) operands.

**Alternatives**

If the test cases were rewritten using alternative approaches:

1. Using `Object.assign` with a custom merge function.
2. Using a library like Lodash's `merge` method.
3. Using a different spread syntax variant, such as using destructuring to create a new object.

Keep in mind that these alternatives might not exactly replicate the behavior of the original test cases and may have their own trade-offs in terms of performance, readability, or maintainability.

Related benchmarks:

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

No previous run results

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