Benchmark: JavaScript spread operator vs Object.assign performance new object

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

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark compares two approaches for creating a new object by combining existing objects: the spread operator (`...`) and `Object.assign()`.

**What is being tested?**

In this benchmark, we have two test cases:

1. Using the spread operator (`...`).
2. Using `Object.assign()`.

Both test cases create a new object `finalObject` by merging two existing objects: `firstObject` and `secondObject`. The main difference between the two approaches is how they perform this merge.

**Options compared**

The benchmark compares the performance of two options:

1. **Spread operator (`...`)**: This approach uses the spread operator to create a new object with the properties of both `firstObject` and `secondObject`. For example:
```javascript
const finalObject = { ...firstObject, ...secondObject };
```
This syntax creates a new object that inherits all the properties from `firstObject` and `secondObject`.

2. **`Object.assign()`**: This approach uses the `Object.assign()` method to merge two objects into one. For example:
```javascript
const finalObject = Object.assign({}, firstObject, secondObject);
```
This syntax creates a new object that inherits all the properties from both `firstObject` and `secondObject`.

**Pros and Cons of each approach**

**Spread operator (`...`):**

Pros:

* More concise and expressive syntax.
* Creates a new object without modifying the original objects.

Cons:

* May be slower than `Object.assign()` due to the overhead of creating a new object with spread syntax.
* Not all browsers support the spread operator in this context (it's still relatively new).

**`Object.assign()`**:

Pros:

* Widely supported across most modern browsers.
* Faster performance compared to spread operator, as it modifies the original objects and creates a new one in a single operation.

Cons:

* Less concise syntax.
* May modify the original objects if not used carefully (e.g., `const finalObject = Object.assign({}, firstObject);` will modify `firstObject`).

**Library usage**

Neither of these approaches uses a specific library. The spread operator is a built-in JavaScript feature, while `Object.assign()` is a method on the `Object` prototype.

**Special JS features or syntax**

The benchmark does not use any special JavaScript features or syntax that require additional explanation.

**Other alternatives**

If you're interested in exploring other approaches to merge objects, here are some alternatives:

* **Lodash.merge()**: A popular utility library that provides a robust way to merge objects. It's often used for more complex merging scenarios.
* **Immer**: A small library that provides a way to update objects in place without creating a new one. This can be useful when you need to modify the original object.
* **ES6 Object Spread Syntax with `Object.create()`**: Another approach to merge objects using the spread operator, but this time with `Object.create()`. It's similar to the spread operator but creates an object with the properties of both objects without modifying the originals.

These alternatives may offer different performance characteristics, syntax, or use cases, so it's worth exploring them if you're interested in optimizing your JavaScript code.

Latest run results:

Run details: (Test run date: 5 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36

Browser/OS: Chrome 73 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	5548700.5 Ops/sec
Using Object.assign	5316888.0 Ops/sec

Related benchmarks:

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

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

Created: 5 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 29 days ago):