Benchmark: JavaScript spread operator vs Object.assign performance with overwite

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar', sampleData: 'baz' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar', sampleData: 'baz' } const finalObject = Object.assign(firstObject, secondObject);
Using Object.assign with into empty object
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar', sampleData: 'baz' } 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 with into empty object

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/126.0.0.0 YaBrowser/24.7.0.0 Safari/537.36

Browser/OS: Yandex Browser 24 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	16492294.0 Ops/sec
Using Object.assign	5591486.0 Ops/sec
Using Object.assign with into empty object	4944587.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 benchmark and explain what's being tested.

The provided JSON represents a JavaScript microbenchmark that compares the performance of three different approaches to merge two objects: using the spread operator (`...`), `Object.assign()`, and `Object.assign()` with an empty object as the target (`{}`).

**What are we testing?**

We're testing how efficiently these three methods can merge two objects, which will result in a new object with all key-value pairs from both original objects.

**Options being compared:**

1. **Using the spread operator (`...`)**:
This method uses the rest parameter syntax to extract key-value pairs from the `secondObject`. The resulting merged object is created by spreading the properties of `firstObject` and `secondObject`.
2. **Using `Object.assign()`**:
This method takes two objects as arguments and merges them into a new object, overwriting any duplicate keys.
3. **Using `Object.assign()` with an empty object as the target (`{}`)**:
Similar to option 2, but instead of merging with an existing object, it creates a new object and assigns properties from both inputs.

**Pros and Cons:**

* **Using the spread operator (`...`)**:
	+ Pros:
		- Concise and readable syntax.
		- Fast execution since it's simply spreading properties into a new object.
	+ Cons:
		- May not be supported in older browsers or environments (e.g., Internet Explorer).
		- Can lead to unexpected behavior if the spread operator is used with functions or other complex types.
* **Using `Object.assign()`**:
	+ Pros:
		- Well-supported and widely adopted across modern browsers and environments.
		- Fast execution since it's simply assigning properties into a new object.
	+ Cons:
		- Can lead to performance issues if the number of properties is very large, as it requires creating a new object reference each time.
* **Using `Object.assign()` with an empty object as the target (`{}`)**:
	+ Pros:
		- Similar performance characteristics to option 2, but with an additional overhead due to the creation of an empty object reference.
	+ Cons:
		- Less efficient than using `Object.assign()` without an initial object.

**Library and purpose:**

* No external libraries are used in this benchmark. The functions and syntax are built-in to JavaScript.

**Special JS feature or syntax:**

The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2018 (ES2018). It's used to expand an object into its individual properties, allowing for more concise and readable code.

In summary, this benchmark tests the performance of three different methods for merging objects: using the spread operator (`...`), `Object.assign()`, and `Object.assign()` with an empty object as the target. While all three approaches have their pros and cons, the spread operator is generally considered a fast and efficient method due to its concise syntax and simple property spreading mechanism.

Related benchmarks:

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

Comparing performance of: Using the spread operator vs Using Object.assign vs Using Object.assign with into empty object

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using Object.assign with into empty object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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