Benchmark: JavaScript spread operator vs Object.assign performance - non-destructive merge

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: 9 months ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	42875540.0 Ops/sec
Using Object.assign	34578308.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's being tested in this benchmark.

The provided JSON represents two microbenchmarks for testing the performance of JavaScript's spread operator (`...`) and `Object.assign` methods when merging objects.

**Benchmark Description**

The benchmarks compare the execution time of creating a new object by using either the spread operator or `Object.assign`. The test case involves creating two objects, `firstObject` and `secondObject`, and then merging them into a new `finalObject`.

**Options Compared**

Two options are compared:

1. **Using the spread operator**: This method uses the syntax `...` to merge the properties of `firstObject` and `secondObject` into a new object.
2. **Using `Object.assign`**: This method uses the `Object.assign()` function to create a new object and then merges the properties of `firstObject` and `secondObject` into it.

**Pros and Cons**

Here are some pros and cons of each approach:

**Using the spread operator:**

Pros:

* More concise and readable syntax
* Less overhead for creating a new object (only one line)

Cons:

* May be slower due to the creation of a temporary array or object on the heap
* Requires support in older browsers, but most modern browsers support it

**Using `Object.assign`:**

Pros:

* Guaranteed performance, as it's a built-in function optimized for speed
* Works across all browsers and environments that support JavaScript

Cons:

* More verbose syntax (`const finalObject = Object.assign({}, firstObject, secondObject);`)
* Requires creating an empty object on the heap, which can be slower than using `...`

**Library/Function Used**

In this benchmark, no external libraries or functions are used beyond built-in JavaScript features.

**Special JS Feature/Syntax**

The spread operator (`...`) is a new syntax introduced in ECMAScript 2018 (ES2018). It allows deconstruction of arrays and objects. This feature is supported in most modern browsers and environments that support ES2018.

**Other Alternatives**

If you're interested in exploring other alternatives, here are a few:

* **`Object.create()`**: Another way to create an object with the spread operator.
* **`Array.prototype.reduce()`**: Using `reduce()` to merge objects can also be a viable alternative.

Related benchmarks:

JavaScript spread operator vs Object.assign performance - non-destructive merge (version: 0)

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

Created: 4 years ago by: Registered User

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