Benchmark: JavaScript spread operator vs Object.assign performance without mutating

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { myValue: 'asd', ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign({myValue: 'asd'},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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	20106752.0 Ops/sec
Using Object.assign	6705422.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of two methods to create a new object by merging two existing objects: using the spread operator (`...`) and using `Object.assign()`.

**Test Cases**

There are two test cases:

1. **Using the spread operator**: This test case creates an object `finalObject` that merges `firstObject` and `secondObject` using the spread operator (`...`). The syntax is as follows:
```
const finalObject = {
  myValue: 'asd',
  ...firstObject,
  ...secondObject
};
```
This approach creates a new object with properties from both `firstObject` and `secondObject`, without mutating the originals.

2. **Using Object.assign()**: This test case achieves the same result as the first test case, but using the `Object.assign()` method:
```
const finalObject = Object.assign({myValue: 'asd'}, firstObject, secondObject);
```
**Options Compared**

The two options being compared are:

* Using the spread operator (`...`) to merge objects
* Using `Object.assign()` to merge objects

**Pros and Cons of Each Approach**

1. **Using the spread operator (`...`)**:
	* Pros:
		+ Concise syntax
		+ Can be used with any object (not just JSON objects)
	* Cons:
		+ Performance overhead due to function call and property iteration
		+ May not be supported in older browsers or Node.js versions
2. **Using Object.assign()**:
	* Pros:
		+ Wide browser support
		+ Fast execution time
	* Cons:
		+ Requires more code and syntax complexity
		+ Not as concise as the spread operator

**Library**

In this benchmark, `Object.assign()` is a built-in JavaScript method, so no library is required.

**Special JS Feature/Syntax**

The benchmark uses the spread operator (`...`) which is a relatively new feature in JavaScript (introduced in ECMAScript 2018). It allows for concise object merging and is widely supported in modern browsers and Node.js versions.

**Other Alternatives**

If you want to avoid using `Object.assign()` or the spread operator, alternative approaches can be used:

* Using the `lodash` library's `merge()` function
* Implementing your own custom merge function using loops and conditional statements

However, these alternatives may introduce additional complexity and overhead compared to the built-in `Object.assign()` method.

Related benchmarks:

JavaScript spread operator vs Object.assign performance without mutating (version: 0)

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

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