Benchmark: JavaScript spread operator vs Object.assign performance without mutating original 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

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36 Edg/86.0.622.51

Browser/OS: Chrome 86 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	1561961.5 Ops/sec
Using Object.assign	3542588.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of two approaches to merge objects in JavaScript:

1. **Spread Operator (`...`)**: This syntax allows you to expand an object's properties into another object.
2. **Object.assign()**: This method copies all enumerable own properties from one or more source objects to a target object.

The benchmark compares the performance of these two approaches when merging two objects without mutating the original objects.

**Options being compared**

* Using the spread operator (`...`) for object merging
* Using `Object.assign()` for object merging

**Pros and Cons of each approach:**

**Using the Spread Operator (`...`)**

Pros:

* More concise and readable code
* No need to specify the target object or existing properties
* Efficient in modern JavaScript engines

Cons:

* Requires support for modern JavaScript features (introduced in ECMAScript 2018)
* May not work as expected if the source objects have non-enumerable properties

**Using Object.assign()**

Pros:

* Widespread support across older browsers and versions of Node.js
* Can handle non-enumerable properties more accurately than the spread operator
* Works with any JavaScript engine, including older ones

Cons:

* Less concise and readable code compared to the spread operator
* Requires specifying the target object or existing properties

**Other considerations**

* **Library usage**: There is no library mentioned in the benchmark definition. However, `Object.assign()` has been a built-in method of the global `Object` since ECMAScript 5 (2009), so it doesn't require any external libraries.

**Special JS feature or syntax**

None are explicitly mentioned in this benchmark. However, the spread operator (`...`) was introduced in ECMAScript 2018 and might not work correctly in older JavaScript engines.

**Other alternatives**

If you prefer a different approach to object merging, here are some alternative methods:

* **Object.create()**: This method creates a new object with the given prototype. You can then assign properties to it using `Object.assign()` or other means.
* **JSON merge algorithms**: There are various JSON merge algorithms available, such as Lodash's `merge()` function or a custom implementation.

Keep in mind that these alternatives might have different performance characteristics compared to the spread operator and `Object.assign()`.

Related benchmarks:

JavaScript spread operator vs Object.assign performance without mutating original object (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 2 months ago):