Benchmark: JavaScript spread operator vs Object.assign vs direct performance

Tests:

Using the spread operator
const firstObject = { a: 0, b: 0 } const secondObject = { a: 1, b: 1 } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { a: 0, b: 0 } const secondObject = { a: 1, b: 1 } const finalObject = Object.assign(firstObject, secondObject);
Assigning directly
let firstObject = { a: 0, b: 0 } const secondObject = { a: 1, b: 1 } finalObject = { a: secondObject.a, b: secondObject.b };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Assigning directly

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	33848760.0 Ops/sec
Using Object.assign	12061515.0 Ops/sec
Assigning directly	12433881.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to merge two objects in JavaScript:

1. **Spread operator**: Using the spread operator (`...`) to merge objects.
2. **Object.assign**: Using the `Object.assign()` method to merge objects.
3. **Direct assignment**: Merging objects by directly assigning properties.

**Options Compared**

The benchmark compares the performance of these three approaches on a simple object merge scenario, where two objects are merged into one. The order of operations is as follows:

* Create two objects: `firstObject` and `secondObject`.
* Merge the objects using each approach (spread operator, Object.assign, or direct assignment) to create a new object, `finalObject`.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Spread operator (`...`)**:
	* Pros: Shorter and more concise code, easy to read.
	* Cons: Performance might be slower due to the creation of a new object with multiple properties.
2. **Object.assign()**:
	* Pros: More explicit and predictable behavior, supports merging objects from different sources.
	* Cons: Can lead to deeper object nesting, which might impact performance in some cases.
3. **Direct assignment**:
	* Pros: Simple and straightforward code, can be faster since it avoids creating a new object.
	* Cons: Less readable and maintainable than the other two approaches.

**Library and Special JS Features**

There are no libraries or special JavaScript features used in this benchmark. The focus is solely on comparing the performance of these three basic object merge strategies.

**Other Considerations**

Keep in mind that:

* The benchmark only measures the performance of merging objects, not the entire application's overhead.
* These results might not generalize to all scenarios, as the input objects and sizes can affect performance.

**Alternatives**

If you're interested in exploring alternative approaches for object merge, consider using:

1. **Array.prototype.reduce()**: Instead of creating a new object, reduce can be used to accumulate properties from two or more sources into an existing object.
2. **Object.create()**: Similar to Object.assign(), but provides more control over the resulting object's prototype and inheritance chain.

I hope this explanation helps you understand the benchmark results!

Related benchmarks:

JavaScript spread operator vs Object.assign vs direct performance (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Assigning directly

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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