Benchmark: JavaScript spread operator vs Object.assign existing vs Object.assign new 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);
Using Object.assign for new object
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
Using Object.assign for new object

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/103.0.0.0 Safari/537.36

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	3138294.8 Ops/sec
Using Object.assign	7437840.5 Ops/sec
Using Object.assign for new object	6722896.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark tests the performance of three different approaches for merging two objects in JavaScript: using the spread operator, `Object.assign`, and creating a new object with `Object.assign`. The test results are compared across various browsers and devices.

**Benchmarked Approaches**

1. **Using the spread operator**: This approach uses the syntax `{...obj1, ...obj2}` to merge two objects, `obj1` and `obj2`. The spread operator is a shorthand way of creating a new object with properties from multiple sources.
2. **Object.assign (existing)**: This approach uses the traditional `Object.assign()` method to merge two objects. It assumes that both inputs are objects and attempts to assign all own enumerable property values of one or more source objects to an existing target object.
3. **Object.assign (new object)**: This approach creates a new object using `Object.assign({}, obj1, obj2)` and then assigns the result to the new object.

**Comparison**

The pros and cons of each approach are:

* **Using the spread operator**: Pros:
	+ Concise syntax
	+ Easy to read and write
	+ No need to create a new object explicitly
Cons:
	+ May be slower than traditional `Object.assign()` due to the overhead of creating a new object
	+ Not supported in older browsers (e.g., IE 8-10)
* **Object.assign (existing)**: Pros:
	+ Faster execution compared to the spread operator
	+ Supported by most modern browsers
Cons:
	+ Requires explicit creation of an object using `new Object()`
	+ May lead to unexpected behavior if not used carefully (e.g., merging arrays with objects)
* **Object.assign (new object)**: Pros:
	+ Similar performance to traditional `Object.assign()`
	+ No need to worry about creating a new object explicitly
Cons:
	+ Creates an extra layer of nesting, which may be confusing for some developers

**Library and Features**

The benchmark does not use any external libraries. However, it does utilize JavaScript features such as:

* Spread operator (`{...obj1, ...obj2}`)
* `Object.assign()` method

These features are supported by most modern browsers.

**Test Results**

The latest test results show that:

* Using the spread operator has the slowest execution time (3138294.75 executions/second) compared to traditional `Object.assign()`.
* Creating a new object with `Object.assign({}, obj1, obj2)` has a similar performance to traditional `Object.assign()`.

**Alternatives**

Other alternatives for merging two objects in JavaScript include:

* Using the `{...obj1, ...obj2}` syntax with `Object.create()` (e.g., `const finalObj = Object.create(obj1); finalObj[Symbol.for('foo')]= obj2['foo'];` )
* Using a library like Lodash's `merge()` function
* Creating an array of properties and then using `Object.assign()` to merge the objects

However, these alternatives may introduce additional overhead or complexity compared to the traditional approaches tested in this benchmark.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using Object.assign for new object

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