Benchmark: JavaScript spread operator vs Object.assign performance 2021 (v2)

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: 3 years ago)

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

Browser/OS: Chrome 92 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	1916675.9 Ops/sec
Using Object.assign	4364033.5 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 JavaScript microbenchmark on MeasureThat.net.

**What is being tested?**

The benchmark compares the performance of two approaches to merge two objects in JavaScript:

1. Using the spread operator (`...` syntax) to create a new object with properties from both `firstObject` and `secondObject`.
2. Using the `Object.assign()` method to merge the properties of two objects.

**Options being compared:**

* **Using the spread operator (`...` syntax)**:
	+ Pros:
		- More concise and readable code.
		- Less prone to errors due to its simplicity.
	+ Cons:
		- May not work as expected if one of the object has a property with the same name as another (i.e., property shadowing).
		- Can be slower than `Object.assign()` in some cases, depending on the browser and engine used.
* **Using `Object.assign()`**:
	+ Pros:
		- More explicit and predictable behavior.
		- Supports property shadowing by allowing target object properties to override source object properties.
	+ Cons:
		- Less concise and more verbose code compared to the spread operator.

**Library/feature usage:**

* **`Object.assign()`**: This is a built-in JavaScript method that merges the properties of one or more source objects into a target object.
* **Spread operator (`...` syntax)**: Introduced in ECMAScript 2018 (ES2018), this syntax allows for object destructuring and creation.

**Special JS feature/syntax:**

The benchmark uses modern JavaScript features, specifically:

* The spread operator (`...` syntax) introduced in ES2018.
* `Object.assign()` method, which has been available since ECMAScript 2009 (ES5).

**Other alternatives:**

If you're looking for alternative ways to merge objects, consider using other methods such as:

* **Loose equality assignment (`=`)**: While not recommended due to potential issues with property shadowing.
* **Object.create()**: Creates a new object and then assigns properties from another object to it.
* **Array.prototype.reduce()**: Can be used to merge two objects by reducing an array of key-value pairs.

Keep in mind that the choice of method depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

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