Benchmark: JavaScript spread operator vs Object.assign performance 2002

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 email = getCookie("email"); const firstname = "firstname" // const firstname = getCookie("firstname"); const lastname = "lastname" // const lastname = getCookie("lastname"); const phone = "phone" // const phone = getCookie("phone"); let cookieValues = {} if (email) { cookieValues.email = email} if (firstname) { cookieValues.firstname = firstname} if (lastname) { cookieValues.lastname = lastname} if (phone) { cookieValues.phone = phone} Object.assign(searchParams, cookieValues);

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

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Purpose:**

The benchmark compares the performance of two approaches to populate an object (`searchParams`) with key-value pairs from another object (`cookieValues`). One approach uses the spread operator (`...`), while the other uses `Object.assign()`.

**Test Case 1: Using the Spread Operator**

In this test case, the code uses the spread operator (`...`) to create a new object (`cookieValues`) that includes only the properties from the original objects (e.g., `email`, `firstname`, etc.) if they are truthy. The resulting `cookieValues` object is then assigned to `searchParams` using `Object.assign()`.

**Test Case 2: Using Object.assign()**

In this test case, the code creates an empty object (`cookieValues`) and then checks each of the variables (`email`, `firstname`, etc.) to see if it's truthy. If it is, a property is added to the `cookieValues` object with that variable as its value. Finally, `Object.assign()` is used to assign the populated `cookieValues` object to `searchParams`.

**Comparison:**

The benchmark compares the performance of these two approaches in Chrome 106 on Windows 10.

**Pros and Cons:**

* **Using the Spread Operator:**
	+ Pros:
		- More concise and readable code.
		- Less chance of accidentally adding empty properties to the object.
	+ Cons:
		- Might be slower due to the overhead of creating a new object with the spread operator.
* **Using Object.assign():**
	+ Pros:
		- Faster, as it uses a built-in function and doesn't require creating a new object.
	+ Cons:
		- More verbose code.
		- Requires careful attention to ensure that only truthy properties are added.

**Library/Legacy Code:**

There is no specific library being used in this benchmark. However, `getCookie()` is mentioned as a function that returns a value (e.g., `"email"`, `"firstname"`), which might be a legacy code snippet or a custom implementation.

**Special JS Feature/Syntax:**

The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2018. It allows objects to be expanded into new objects, creating a shallow copy of the original object's properties.

In this benchmark, the spread operator is used to create a new object with only the truthy values from the variables `email`, `firstname`, etc. This syntax is concise and readable, making it a popular choice for many developers.

**Alternatives:**

Other alternatives to using the spread operator or `Object.assign()` might include:

* Using a loop to iterate over the properties of the original object.
* Creating an empty object and then adding properties from each variable using bracket notation (e.g., `searchParams[email] = email;`).
* Using a library like Lodash, which provides utility functions for working with objects.

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

Browser/OS: Chrome 106 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	526501.5 Ops/sec
Using Object.assign	3336591.0 Ops/sec

Related benchmarks:

JavaScript spread operator vs Object.assign performance 2002 (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 one month ago):