Benchmark: JavaScript spread operator vs Object.assign direct mutation vs Object.assign in new Object performance

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign in new Object
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign({}, firstObject, secondObject);
Using Object.assign direct mutation
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 in new Object
Using Object.assign direct mutation

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	38387164.0 Ops/sec
Using Object.assign in new Object	8791547.0 Ops/sec
Using Object.assign direct mutation	10438912.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance differences between three approaches for merging objects in JavaScript: using the spread operator (`...`), using `Object.assign` with direct mutation, and using `Object.assign` with creating a new object.

**Options Compared**

1. **Using the Spread Operator (`...`)**:
	* This approach uses the rest operator (`...`) to merge two objects into a new object.
	* The resulting object is returned by the expression, which can be assigned to another variable or used as needed.
2. **Using `Object.assign` with Direct Mutation**:
	* This approach modifies the original object by assigning it to itself using `Object.assign`.
	* The original object's properties are overwritten, which can lead to unexpected behavior if not handled carefully.
3. **Using `Object.assign` with Creating a New Object**:
	* This approach creates a new object and assigns it the result of merging two objects using `Object.assign`.
	* A new object is created for each execution, avoiding potential issues with modifying original objects.

**Pros and Cons**

1. **Using the Spread Operator (`...`)**:
	* Pros: concise, expressive, and efficient.
	* Cons: may lead to unexpected behavior if not used carefully (e.g., when merging objects with conflicting properties).
2. **Using `Object.assign` with Direct Mutation**:
	* Pros: simple and straightforward.
	* Cons: can be problematic if the original object is meant to remain unchanged, as it modifies its properties.
3. **Using `Object.assign` with Creating a New Object**:
	* Pros: avoids modifying original objects, which can lead to predictable behavior.
	* Cons: may incur additional overhead due to creating new objects.

**Library Used**

In the provided benchmark definition and test cases, `Object.assign` is used as a built-in JavaScript method for merging objects. There is no external library required.

**Special JS Feature or Syntax**

The spread operator (`...`) was introduced in ECMAScript 2015 (ES6) and allows for concise object creation and merging. It has become a widely accepted and efficient way to merge objects.

No other special features or syntax are mentioned in the provided benchmark definition and test cases.

**Other Alternatives**

Besides the three approaches mentioned, other alternatives for merging objects in JavaScript include:

* Using `lodash.merge()` (from the Lodash library)
* Creating an object using `{...}`, followed by assigning properties to it
* Using a custom function to merge objects

However, these alternatives are not specifically addressed in the provided benchmark definition and test cases.

Related benchmarks:

JavaScript spread operator vs Object.assign direct mutation vs Object.assign in new Object performance (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign in new Object vs Using Object.assign direct mutation

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign in new Object

Using Object.assign direct mutation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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