Benchmark: compare Object.assign vs spread operator

Tests:

Object.assign
var params = { b:"hello", c: true, d:7 }; var newObj = { a: 2 }; var other = Object.assign({},newObj, params);
spread operator
var params = { b:"hello", c: true, d:7 }; var newObj = { a: 2 }; var other = { ...newObj, ...params };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator

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/123.0.0.0 Safari/537.36 Edg/123.0.0.0

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
Object.assign	3684784.0 Ops/sec
spread operator	9398957.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain what's tested in the provided JSON, compare options, pros and cons of those approaches, and discuss other considerations.

**What is being tested?**

The benchmark tests two JavaScript methods: `Object.assign` and the spread operator (also known as rest parameter syntax). The test creates an object with some initial properties (`newObj`) and another object with additional properties (`params`). The objective is to merge these two objects into a new one, which is stored in the `other` variable.

**Options compared**

There are two options being compared:

1. **`Object.assign()`**: This method takes multiple source objects as arguments and merges them into a target object.
2. **Spread operator (`...`)**: This syntax allows you to create a new object by spreading the properties of an existing object or array.

**Pros and Cons**

**`Object.assign()`:**

Pros:

* Well-established method with good support across browsers and platforms.
* Can be used with any number of source objects.
* Supports merging arrays and objects.

Cons:

* Less readable code, as it requires calling a specific function to merge objects.
* Can lead to confusing syntax when dealing with multiple sources.

**Spread operator (`...`):**

Pros:

* More concise and expressive syntax than `Object.assign()`.
* Easier to read and understand, especially for merging single objects or arrays.
* Less error-prone, as it eliminates the need for function calls.

Cons:

* Requires support for rest parameters (introduced in ECMAScript 2015) which might not be available in older browsers.
* Can lead to issues if used with non-object values (e.g., functions, arrays).

**Other considerations**

Both methods have their trade-offs. `Object.assign()` is more reliable and flexible, while the spread operator provides a cleaner syntax. However, the spread operator's performance may vary depending on the browser and JavaScript engine.

In this benchmark, the results suggest that the spread operator has an advantage in terms of execution speed.

**Library usage**

There are no libraries being used in these test cases.

**Special JS features or syntax**

The spread operator is a relatively new feature introduced in ECMAScript 2015. It allows using rest parameters (`...`) to create new objects from existing ones.

**Alternatives**

Other alternatives for merging objects could be:

* `lodash.merge()`: A popular utility library that provides an efficient and flexible way to merge objects.
* `Object.create()` + `Object.assign()`: This approach involves creating a new object using `Object.create()` and then assigning properties using `Object.assign()`.
* **Manual iteration**: Using `for` loops or `Array.prototype.forEach()` to iterate over the source objects' properties and assign them to the target object.

Keep in mind that these alternatives might not be as concise or readable as the spread operator, but they can provide a more traditional approach to merging objects.

Related benchmarks:

compare Object.assign vs spread operator (version: 0)

Comparing performance of: Object.assign vs spread operator

Created: 6 years ago by: Registered User

Jump to the latest result

Object.assign

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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