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

Using the spread operator

38.4M/s

Using Object.assign direct mutation

10.4M/s

Using Object.assign in new Object

8.8M/s

View exact numbers

Test name	Executions per second
✓ Using the spread operator	38,387,164 Ops/sec
Using Object.assign direct mutation	10,438,912 Ops/sec
Using Object.assign in new Object	8,791,547 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.

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: 5 years ago by: Guest

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

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: 5 years ago by: Guest

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

Related benchmarks

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