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

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: 3 years ago)

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

Browser/OS: Chrome 87 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	2138404.8 Ops/sec
Using Object.assign	5239895.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this benchmark.

**What is being tested:**

The benchmark compares the performance of two approaches for merging objects in JavaScript:

1. **Spread Operator (`...`)**: This syntax was introduced in ECMAScript 2018 (ES2018) and allows you to merge objects by spreading their properties onto another object.
2. **Object.assign() method**: This is a built-in JavaScript method that merges two or more source objects into a target object.

**Options being compared:**

* Spread Operator (`...`)
* Object.assign()

**Pros and Cons of each approach:**

**Spread Operator (`...`)**

Pros:

* More concise and readable code
* Works with modern browsers and Node.js versions (starting from ES2018)
* Does not require any additional libraries or imports

Cons:

* May be slower than Object.assign() in older JavaScript environments
* Can lead to unexpected behavior if used incorrectly (e.g., merging multiple objects)

**Object.assign() method**

Pros:

* Works with all modern browsers and Node.js versions
* Fast and efficient
* Well-established and widely supported

Cons:

* More verbose code compared to the spread operator
* Requires a function call (`Object.assign()` instead of just `...`)

**Other considerations:**

The benchmark assumes that both approaches are being used without any additional libraries or modifications, except for the presence of modern JavaScript features (like ES2018 syntax). It's also worth noting that there may be differences in performance between these two methods due to the way they are implemented by different browsers and Node.js versions.

**Library/Function usage:**

The benchmark uses the `Object` function from the global object, which is a built-in JavaScript function. There are no external libraries or modules required for this benchmark.

There are no special JS features or syntax being tested in this benchmark. However, it's worth noting that modern browsers and Node.js versions support many advanced JavaScript features, such as async/await, generators, and classes, but these are not explicitly tested here.

**Alternatives:**

If you need to compare performance of other object merging approaches, some alternatives could be:

* Lodash `_.merge()` function
* Ramda `R.merge()` function
* Custom implementation using a loop or recursion

Please note that the benchmark is focused on comparing two specific approaches (spread operator and Object.assign()), so it's hard to consider alternative approaches without modifying the benchmark itself.

I hope this explanation helps!

Related benchmarks:

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

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

Created: 4 years 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 one month ago):