Benchmark: JavaScript spread operator vs Object.assign performance apples to apples

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign({}, firstObject, secondObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	38961924.0 Ops/sec
Using Object.assign	10400545.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 explain what's being tested, compared, and considered.

**Benchmark Overview**

The benchmark compares the performance of two approaches to merge objects in JavaScript: using the spread operator (`...`) and `Object.assign()`. The goal is to determine which approach is faster for this specific use case.

**Options Compared**

There are two main options being compared:

1. **Using the Spread Operator (`...`)**: This method uses the spread operator to create a new object with properties from both `firstObject` and `secondObject`.
2. **Using `Object.assign()`**: This method uses the `Object.assign()` function to merge two objects into one.

**Pros and Cons of Each Approach**

1. **Using the Spread Operator (`...`)**:
	* Pros: concise, easy to read, and maintainable.
	* Cons: performance might be slower due to object creation and copying.
2. **Using `Object.assign()`**:
	* Pros: can handle more complex merge scenarios, such as array merging.
	* Cons: less readable and maintainable compared to the spread operator.

**Library Used**

None of the benchmark code uses a specific JavaScript library.

**Special JS Feature/Syntax**

The benchmark doesn't use any special JavaScript features or syntax. It's focused on comparing two fundamental approaches to object merge.

**Other Considerations**

* **Performance**: The benchmark measures performance, so it's essential to consider how different browsers and devices might affect execution speed.
* **Browser Compatibility**: The benchmark is run on Chrome 120, which means the results may not be representative of other browsers.
* **Object Size**: The benchmark uses small objects with limited properties. If the objects being merged are larger or more complex, the performance difference between these two approaches might become less significant.

**Alternative Approaches**

Other alternatives to merge objects in JavaScript include:

1. **Destructuring assignment**: using destructuring syntax to extract properties from objects.
2. **Object.create()**: creating a new object and setting its properties.
3. **Array.prototype.reduce()**: reducing an array of objects into a single object.

However, these approaches might have different performance characteristics, readability, or maintenance requirements compared to the spread operator and `Object.assign()` used in this benchmark.

Related benchmarks:

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

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

Created: 2 years ago by: Registered User

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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