Benchmark: JavaScript spread operator vs Object.assign (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
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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	12485343.0 Ops/sec
Using Object.assign	23247536.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 JavaScript benchmark.

**Benchmark Definition**

The benchmark compares two approaches to merge objects in JavaScript:

1. **Spread Operator (`...`)**: This approach uses the spread operator to create a new object that includes all properties from both `firstObject` and `secondObject`. The syntax is `{ ...firstObject, ...secondObject }`.
2. **`Object.assign()`**: This approach uses the `Object.assign()` method to merge two objects into one. In this case, we're using it with an empty object (`{}`) as the target object, like so: `const finalObject = Object.assign({}, firstObject, secondObject);`.

**Options Compared**

The benchmark is comparing these two approaches:

* **Spread Operator (using `{ ... }`)**: This approach creates a new object by copying all properties from both `firstObject` and `secondObject`. It's often considered more readable and easier to understand than `Object.assign()`.
* **`Object.assign()`**: This approach merges two objects into one, overwriting any duplicate keys. While it works well in many cases, it can be less intuitive for some developers.

**Pros and Cons**

**Spread Operator (using `{ ... }`)**

Pros:

* More readable and easier to understand
* Creates a new object with all properties from both sources
* Less likely to overwrite existing properties accidentally

Cons:

* Can be slower than `Object.assign()` due to the overhead of creating a new object
* Not supported in older browsers (e.g., Internet Explorer)

**`Object.assign()`**

Pros:

* Faster than spread operator, since it only copies existing keys
* Supported by most modern browsers

Cons:

* Less readable and less intuitive for some developers
* Can overwrite existing properties if they have the same key name

**Library Used: None**

This benchmark doesn't use any external libraries.

**Special JS Feature or Syntax: None**

There are no special JavaScript features or syntax used in this benchmark. The test cases only focus on comparing two basic approaches to merge objects.

**Other Alternatives**

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

* **`Object.assign()` with an object spread operator**: You can use the new `object Spread Operator` feature (introduced in ECMAScript 2018) to create a new object with all properties from both sources: `{ ...firstObject, ...secondObject }`. This approach is similar to the spread operator but uses the new syntax.
* **`JSON.merge()`**: This is an older method for merging objects that's been replaced by `Object.assign()` in modern JavaScript. It's not widely supported and should be avoided.

Overall, this benchmark provides a useful comparison between two common approaches to merge objects in JavaScript, helping developers understand the trade-offs between readability, performance, and browser support.

Related benchmarks:

JavaScript spread operator vs Object.assign (new object) performance (version: 0)

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

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