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

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Using the spread operator

41.4M/s

Using Object.assign

11.1M/s

Fastest: Using the spread operator (3.7x faster)

View exact numbers

✓ Using the spread operator: 41,392,804 ops/sec
• Using Object.assign: 11,129,921 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

Using the spread operator

7.8M/s

Using Object.assign

7.0M/s

View exact numbers

Test name	Executions per second
✓ Using the spread operator	7,846,090 Ops/sec
Using Object.assign	6,984,701 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.

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

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

Created: 7 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 7 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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