Benchmark: JavaScript spread operator vs Object.assign performance vs property add

Tests:

Using the spread operator
let firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } firstObject = { ...firstObject, ...secondObject };
Using Object.assign
let firstObject = { sampleData: 'Hello world' } firstObject = Object.assign(firstObject, { moreData: 'foo bar' });
add
const firstObject = { sampleData: 'Hello world' } firstObject.moreData = 'foo bar'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.96 YaBrowser/20.4.0.3443 Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 20 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Using the spread operator	17770806.0 Ops/sec
Using Object.assign	4747118.0 Ops/sec
add	680403520.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The test compares three different approaches to add or merge properties to an object:

1. Using the spread operator (`...`)
2. Using `Object.assign()`
3. Adding properties directly to the object (`moreData = 'foo bar'`)

**Test Case 1: Using the Spread Operator**

In this test, we create two objects: `firstObject` with a single property `sampleData`, and `secondObject` with another property `moreData`. We then use the spread operator (`...`) to merge these two objects into one. The goal is to measure the performance of this approach.

**Test Case 2: Using Object.assign()**

In this test, we create the same two objects as before and use `Object.assign()` to merge them together.

**Test Case 3: Adding Properties Directly**

In this test, we modify the original `firstObject` directly by adding a new property `moreData`. This approach is likely to be slower than the first two because it involves re-assigning the object's properties.

**Library and Purpose**

None of these approaches rely on any external libraries. The spread operator (`...`) is a built-in JavaScript feature introduced in ES6, while `Object.assign()` is also a built-in method.

**Special JS Feature or Syntax**

The spread operator (`...`) is a new way to merge objects that was introduced in ECMAScript 2015 (ES6). It allows you to expand an object into another object using the syntax `{ ...obj }`. This feature has become widely adopted and is now supported by most modern browsers.

**Performance Considerations**

The performance of these approaches can vary depending on the specific use case:

* **Using the spread operator (`...`)**: This approach is likely to be the fastest because it involves a simple object merge operation, which can be optimized by the browser.
* **Using `Object.assign()`**: This approach may be slower than the spread operator because `Object.assign()` involves creating a new object and then assigning properties to it. However, modern browsers have optimized `Object.assign()` for performance.
* **Adding Properties Directly**: This approach is likely to be the slowest because it involves re-assigning the entire object's properties.

**Other Alternatives**

Other approaches to merge objects include:

* Using the `concat()` method: `let result = { ...firstObject }; result.concat(secondObject);`
* Using the `merge()` function from a library like Lodash
* Creating a new object and then assigning all properties using `Object.defineProperty()`

However, these alternatives are not tested in this benchmark.

Overall, the test provides valuable insights into the performance characteristics of different approaches to merge objects in JavaScript.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

add

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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