Benchmark: JavaScript spread operator vs Object.assign performance no write over

Tests:

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 85 on Mac OS X 10.13.6

View result in a separate tab

Test name	Executions per second
Using the spread operator	1807887.1 Ops/sec
Using Object.assign	2585740.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**What is tested?**

The benchmark measures the performance difference between using the spread operator (`...`) and `Object.assign` to merge two JavaScript objects.

**Options compared:**

Two options are being compared:

1. **Using the spread operator**: This approach uses the syntax `{ ...firstObject, ...secondObject }` to create a new object by spreading the properties of `firstObject` and `secondObject`.
2. **Using `Object.assign`**: This approach uses the method `Object.assign()` to merge two objects.

**Pros and Cons:**

* **Using the spread operator**:
	+ Pros: concise, readable, and efficient (only a single operation).
	+ Cons: may be slower due to the creation of an intermediate object.
* **Using `Object.assign`**:
	+ Pros: widely supported, can handle nested objects, and may be faster in some cases due to optimization.
	+ Cons: more verbose, and may lead to errors if not used correctly.

In general, using the spread operator is a good choice when you need to merge two simple objects. However, if you're working with complex data structures or performance-critical code, `Object.assign` might be a better option.

**Library usage:**

There is no library being used in this benchmark.

**Special JavaScript feature/syntax:**

The spread operator (`...`) was introduced in ECMAScript 2018 (ES10). It allows you to create a new object by spreading the properties of an existing object. This syntax is a shorthand for creating a new object with the same properties as the original object, plus any additional properties.

**Other alternatives:**

If you need to merge objects in JavaScript, there are other approaches you can take:

* Using `Object.assign()` and creating an intermediate object.
* Using the `merge` function from libraries like Lodash or Immer.
* Using a custom function to merge objects.

For this specific benchmark, using the spread operator is a concise and efficient way to merge two simple objects. However, if you need more control over the merging process or are working with complex data structures, other approaches might be more suitable.

Related benchmarks:

JavaScript spread operator vs Object.assign performance no write over (version: 0)

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

Created: 3 years 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):