Benchmark: JavaScript spread operator vs Object.assign with empty obj performance

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.4.1

View result in a separate tab

Test name	Executions per second
Using the spread operator	13573774.0 Ops/sec
Using Object.assign	10422555.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 benchmark and explain what's being tested.

**Benchmark Goal**

The goal of this benchmark is to compare the performance of two ways to merge objects in JavaScript: using the spread operator (`...`) and `Object.assign()` with an empty object (`{}`) as the target.

**Test Cases**

There are two test cases:

1. **Using the spread operator**: This test case defines two objects, `firstObject` and `secondObject`, and then uses the spread operator to merge them into a new object, `finalObject`. The syntax is: `const finalObject = { ...firstObject, ...secondObject }`.
2. **Using Object.assign**: This test case defines the same two objects, but uses `Object.assign()` with an empty object as the target to merge them into a new object, `finalObject`. The syntax is: `const finalObject = Object.assign({}, firstObject, secondObject);`.

**Library and Special JS Feature**

In this benchmark, there are no external libraries used. However, it does utilize a special JavaScript feature introduced in ECMAScript 2018 (ES2018): the rest/spread operator (`...`).

The rest/spread operator allows you to create a new object by "spreading" properties from an existing object or array. In this benchmark, it's used to merge objects using the spread operator.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Using the spread operator:**
	+ Pros:
		- More concise and expressive syntax.
		- Easier to read and understand for developers familiar with the syntax.
	+ Cons:
		- May be slower than `Object.assign()` due to the overhead of the spread operator.
		- Requires ECMAScript 2018 (ES2018) support, which may not be available in older browsers or environments.
* **Using Object.assign:**
	+ Pros:
		- Well-established and widely supported syntax.
		- May be faster than using the spread operator due to the overhead of the spread operator.
	+ Cons:
		- Less concise and more verbose syntax.
		- May require additional arguments (e.g., `Object.assign(target, ...)`).

**Other Alternatives**

If you need to merge objects in JavaScript, there are other alternatives:

* **Using the `reduce()` method**: You can use the `reduce()` method to combine two arrays or objects into a single array or object. For example: `const finalObject = Object.values(firstObject).concat(Object.values(secondObject)).reduce((a, b) => ({ ...a, ...b }), {})`.
* **Using a library like Lodash**: If you need more complex merging logic or additional functionality, you can use a library like Lodash, which provides a `merge()` function that can handle various merging scenarios.
* **Using a template literal with interpolation**: You can also use template literals to merge objects by interpolating the object properties into a string. For example: `const finalObject = { ...firstObject, ...secondObject };`. However, this approach may not be as expressive or readable as using the spread operator or `Object.assign()`.

Related benchmarks:

JavaScript spread operator vs Object.assign with empty obj performance (version: 0)

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

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