Benchmark: JavaScript spread operator vs Object.assign vs Add property 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);
property
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const field = 'moreData' firstObject[secondObject[field]] = secondObject const ob = firstObject

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
property

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Windows

View result in a separate tab

property

714.4M/s

Using the spread operator

24.8M/s

Using Object.assign

6.5M/s

View exact numbers

Test name	Executions per second
✓ property	714,438,656 Ops/sec
Using the spread operator	24,757,724 Ops/sec
Using Object.assign	6,525,981 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark tests the performance of three different approaches to merge objects in JavaScript:

1. The spread operator (`...`)
2. `Object.assign()`
3. Assigning properties dynamically using bracket notation (`firstObject[secondObject[field]] = secondObject`)

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

The spread operator is a new syntax introduced in ECMAScript 2018 (ES8). It allows you to expand an object into multiple arguments, making it easier to merge objects.

```javascript
const finalObject = { ...firstObject, ...secondObject };
```

Pros:

* Concise and readable syntax
* Native support in modern browsers and Node.js environments

Cons:

* May have performance overhead due to the need for browser or engine optimizations
* Not all versions of JavaScript engines may implement it efficiently

**`Object.assign()`**

`Object.assign()` is a built-in method that allows you to merge multiple objects into one.

```javascript
const finalObject = Object.assign(firstObject, secondObject);
```

Pros:

* Wide support across older browsers and Node.js environments
* Well-documented and widely understood by developers

Cons:

* Requires two arguments (target object and source object) in the most basic form, which can be less readable than the spread operator syntax.

**Assigning Properties Dynamically**

This approach uses bracket notation to assign properties dynamically.

```javascript
firstObject[secondObject[field]] = secondObject;
const ob = firstObject;
```

Pros:

* Wide support across older browsers and Node.js environments
* Can be a good option when working with legacy codebases or specific browser versions

Cons:

* Less readable syntax compared to the spread operator or `Object.assign()`
* More error-prone due to potential typos in property names

**Library: None**

There are no libraries involved in this benchmark.

**Special JavaScript Features/Syntax: ES8 Spread Operator**

The benchmark uses the ES8 spread operator feature, which is a relatively new addition to the JavaScript standard. This feature allows for more concise object merging and has become widely adopted in modern JavaScript development.

**Alternative Approaches**

Other approaches to merge objects include:

* Using `for...in` loops to iterate over object properties
* Utilizing libraries like Lodash (`_.merge()`)
* Employing custom function to merge objects based on specific requirements

However, the spread operator and `Object.assign()` methods are the most commonly used and efficient ways to merge objects in modern JavaScript development.

JavaScript spread operator vs Object.assign vs Add property performance (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JavaScript spread operator vs Object.assign vs Add property performance (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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