Benchmark: Spread vs Object.assign (modify ) vs Object.assign (new)

Script Preparation code:

var obj1 = { a: 'a' };

Tests:

Spread
const obj2 = {...obj1, b: 'b'};
Object.assign (modify)
const obj2 = Object.assign(obj1, {b: 'b'});
Object.assign (new)
const obj2 = Object.assign({}, obj1, {b: 'b'});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Object.assign (modify)
Object.assign (new)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Spread	6091695.5 Ops/sec
Object.assign (modify)	3308585.5 Ops/sec
Object.assign (new)	2885490.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is tested?**

The provided JSON represents a JavaScript microbenchmark that compares three different approaches to merge two objects:

1. **Spread**: Using the spread operator (`{...obj1, b: 'b'}`) to create a new object by copying `obj1` and adding a new property `b`.
2. **Object.assign (modify)**: Calling `Object.assign(obj1, {b: 'b'})` to merge `obj1` with an object containing the new property `b`.
3. **Object.assign (new)**: Calling `Object.assign({}, obj1, {b: 'b'})` to create a new object by merging `obj1` and an object containing the new property `b`.

**Options comparison**

The three approaches have different pros and cons:

* **Spread**: This approach creates a new object using the spread operator. It is concise and efficient but may not be as readable for complex merges.
* **Object.assign (modify)**: This approach modifies the original object `obj1` by adding a new property `b`. While it's straightforward, it can be seen as less intuitive and may have unexpected side effects if used in other parts of the codebase.
* **Object.assign (new)**: This approach creates a new object by merging `obj1` with an empty object and then adding the new property `b`. It is more explicit but may be slightly slower due to the extra object creation.

**Library usage**

The benchmark uses the built-in `Object.assign()` method, which is a part of the ECMAScript standard. Its purpose is to copy properties from one or more source objects to a target object.

**Special JavaScript features**

There are no special JavaScript features or syntax used in this benchmark.

**Other alternatives**

For merging two objects, other approaches exist:

* Using the `concat()` method: `var obj2 = obj1.concat({b: 'b'})`
* Using a loop: `var obj2 = {}; for (var key in obj1) { obj2[key] = obj1[key]; } obj2.b = 'b';`
* Using `Object.create()`: `var obj2 = Object.create(obj1); obj2.b = 'b';`

Keep in mind that these alternatives may have different performance characteristics and readability compared to the three approaches tested in this benchmark.

I hope this explanation helps software engineers understand the provided benchmark!

Related benchmarks:

Spread vs Object.assign (modify ) vs Object.assign (new) (version: 0)

Comparing performance of: Spread vs Object.assign (modify) vs Object.assign (new)

Created: 7 years ago by: Guest

Jump to the latest result

Spread

Object.assign (modify)

Object.assign (new)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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