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

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	42648552.0 Ops/sec
Using Object.assign	36031436.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 what is being tested in this benchmark.

The test case is comparing two approaches to merge objects: using the JavaScript spread operator (`...`) and `Object.assign()`.

**Using the Spread Operator**

* The script creates two example objects, `firstObject` and `secondObject`, with some sample data.
* Then, it uses the spread operator to create a new object, `finalObject`, by spreading the properties of both `firstObject` and `secondObject`.
* The test is measuring the performance of this approach.

**Using Object.assign()**

* The script creates two example objects, `firstObject` and `secondObject`, with some sample data.
* Then, it uses the `Object.assign()` method to create a new object, `finalObject`, by passing an initial object (`firstObject`) and an array of arguments (`secondObject`).
* The test is measuring the performance of this approach.

**Pros and Cons**

Using the spread operator:

* Pros:
	+ More concise and readable code.
	+ Less error-prone than using `Object.assign()` with a single argument.
* Cons:
	+ May be slower in older browsers or versions that don't support the spread operator.
	+ Can lead to performance issues if used excessively.

Using Object.assign():

* Pros:
	+ Widely supported by modern browsers and engines.
	+ Faster execution compared to the spread operator for large objects.
* Cons:
	+ Less readable code due to its verb-noun syntax.
	+ More error-prone than using the spread operator, especially with multiple arguments.

**Library Usage**

There is no explicit library used in this benchmark. However, `Object.assign()` has been part of the ECMAScript standard since 2015 (ES6) and is widely supported by most modern browsers and engines.

**Special JS Features or Syntax**

The test uses the spread operator (`...`), which is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows for more concise object merging and can improve readability. The syntax was previously only available in certain browsers, but it's now widely supported by modern engines.

**Other Alternatives**

Before using either the spread operator or `Object.assign()`, other alternatives existed:

* Using a library like Lodash's `merge()` function.
* Implementing custom object merging functions.
* Using JSON merge strategies (e.g., deep copying and then merging).

However, these alternatives are generally less concise, more error-prone, or slower compared to the spread operator and `Object.assign()`.

Related benchmarks:

JavaScript spread operator vs Object.assign performance (Immutable) (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>

Fastest: N/A

Slowest: N/A

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