Benchmark: JavaScript spread operator vs Object.assign performance, non destructive

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: 8 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 139 on Android

View result in a separate tab

Test name	Executions per second
Using the spread operator	7846090.5 Ops/sec
Using Object.assign	6984701.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance difference between two approaches: using the JavaScript spread operator (`...`) and `Object.assign` to merge two objects.

**What is being tested?**

Two test cases are being compared:

1. Using the spread operator (`...`): This approach spreads the properties of one object into another, creating a new object with merged properties.
2. Using `Object.assign`: This approach creates a new object and assigns the values from two other objects to it.

**Options comparison**

The benchmark compares these two approaches for merging objects. Here are some pros and cons of each:

* **Using the spread operator (`...`)**:
	+ Pros: concise, readable, and efficient.
	+ Cons: not all browsers support this syntax (older versions of Internet Explorer).
* **Using `Object.assign`**:
	+ Pros: widely supported across different browsers and versions.
	+ Cons: can be less readable and more verbose than the spread operator.

**Library usage**

There is no library being used in these test cases. Both approaches rely on built-in JavaScript functionality.

**Special JS feature or syntax**

The spread operator (`...`) is a newer feature introduced in ECMAScript 2018 (ES2020). It provides a concise way to merge objects, but it's not supported in older browsers and versions of Internet Explorer.

**Other alternatives**

Before the spread operator was introduced, developers used various workarounds to achieve similar results:

* Using `Object.assign` with multiple arguments: `Object.assign({}, firstObject, secondObject)`
* Creating a new object and assigning values using bracket notation: `const finalObject = { [Object.keys(firstObject)[0]]: firstObject[Object.keys(firstObject)[0]], [Object.keys(secondObject)[0]]: secondObject[Object.keys(secondObject)[0]] };`

However, these alternatives are less readable and efficient than the spread operator.

**Benchmark result**

The latest benchmark results show that:

* Using `Object.assign` outperforms using the spread operator (`...`) in this specific test case.
* The performance difference is likely due to the fact that `Object.assign` uses a more optimized internal implementation, while the spread operator creates a new object and then iterates over its properties.

Keep in mind that these results may vary depending on the specific use case and browser versions being tested.

Related benchmarks:

JavaScript spread operator vs Object.assign performance, non destructive (version: 0)

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

Created: 6 years ago by: Guest

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):