Benchmark: JavaScript spread operator vs Object.assign performance 2001

Tests:

Using the spread operator
const searchParams = {}; const email = "email" // const email = getCookie("email"); const firstname = "firstname" // const firstname = getCookie("firstname"); const lastname = "lastname" // const lastname = getCookie("lastname"); const phone = "phone" // const phone = getCookie("phone"); // const cookieValues = { // email, // firstname, // lastname, // phone, // }; let cookieValues = { ...(email && { email }), ...(firstname && { firstname }), ...(lastname && { lastname }), ...(phone && { phone }), } Object.assign(searchParams, cookieValues);
Using Object.assign
const searchParams = {}; const email = "email"; const firstname = "firstname"; const lastname = "lastname"; const phone = "phone"; Object.assign(searchParams, { email, firstname, lastname, phone, });

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	792177.7 Ops/sec
Using Object.assign	5464210.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark and explore the different approaches, pros, cons, and considerations.

**What is being tested?**

The test cases are comparing the performance of two ways to set object properties on an existing object using the spread operator (`...`) versus `Object.assign()`. Specifically, they're measuring how long it takes to assign values from a variable `cookieValues` to an empty `searchParams` object.

**Options being compared:**

1. **Spread Operator (Rest SPREAD OPERATOR)**: This syntax allows you to expand an array-like object into individual elements or spread properties of an existing object onto a new object.
```javascript
let cookieValues = {
  // ...
};
Object.assign(searchParams, { ...cookieValues });
```
2. **`Object.assign()` method**: This method copies properties from one or more source objects to a target object.

**Pros and Cons:**

* **Spread Operator (Rest SPREAD OPERATOR)**:
	+ Pros:
		- More concise and readable code.
		- Can be used with arrays as well, not just objects.
	+ Cons:
		- Performance overhead due to the need to create a new array-like object.
		- Might not be supported in older browsers or environments.
* **`Object.assign()` method**:
	+ Pros:
		- Wide support across browsers and environments.
		- Can be used with arrays, objects, or even non-object values (like `null` or `undefined`).
	+ Cons:
		- More verbose code.
		- Might not be as readable.

**Other Considerations:**

* **Browser Support**: Both approaches should work in modern browsers. However, older browsers might require polyfills or workarounds for the spread operator.
* **Performance**: The test results show that `Object.assign()` is slightly faster than the spread operator. This might be due to the overhead of creating a new array-like object with the spread operator.
* **Code Readability**: While both approaches have their trade-offs, the spread operator is generally considered more readable and concise.

**Library/Functionality Used:**

None explicitly mentioned in this benchmark. However, `getCookie()` is used within the script to retrieve values from cookies, which implies that some library or framework (e.g., JavaScript frameworks like React or Angular) might be involved.

If you're interested in learning more about modern JavaScript features, the spread operator is a relatively recent addition to the language, introduced in ECMAScript 2018 (ES2018). It's been widely adopted and supported across browsers and environments since then.

Related benchmarks:

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

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

Created: one year 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):