Benchmark: JavaScript spread operator vs Object.assign with empty object literal performance

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({}, 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: 4 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

Browser/OS: Chrome 78 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	13449722.0 Ops/sec
Using Object.assign	4528875.0 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 world of JavaScript benchmarks.

**What is being tested?**

MeasureThat.net is testing two different approaches to merge two objects in JavaScript:

1. Using the spread operator (`...` syntax)
2. Using `Object.assign()` with an empty object literal (`{}`)

The benchmark aims to compare the performance of these two methods.

**Options compared:**

* Spread operator (`...` syntax)
	+ Pros:
		- More concise and readable
		- Less error-prone than using `Object.assign()`
	+ Cons:
		- May be slower due to the overhead of creating a new object
* `Object.assign()` with an empty object literal (`{}`)
	+ Pros:
		- Can be faster since it only creates one object
	+ Cons:
		- Less concise and less readable than using the spread operator

**Other considerations:**

* The benchmark uses Chrome 78 on a Linux desktop as the base environment.
* The `ExecutionsPerSecond` metric is used to measure performance, which indicates the number of executions per second.

**Library usage:**

None. This benchmark does not use any external libraries.

**Special JS feature or syntax:**

The spread operator (`...`) is a relatively new JavaScript feature introduced in ECMAScript 2018. It allows for more concise and expressive object merging.

**Benchmark preparation code:**

The provided `Script Preparation Code` is empty, which means that the benchmark starts with clean slate and no initialization code is executed before running the test cases.

**Individual test cases:**

There are two test cases:

1. "Using the spread operator"
	+ This test case uses the spread operator to merge two objects (`firstObject` and `secondObject`) into a new object (`finalObject`).
2. "Using Object.assign"
	+ This test case uses `Object.assign()` with an empty object literal (`{}`) to merge two objects (`firstObject` and `secondObject`) into a new object (`finalObject`).

**Latest benchmark result:**

The latest results show that:

* The spread operator approach is slightly faster than using `Object.assign()`.
* However, the difference in performance is not significant.

Keep in mind that this is just one specific benchmark, and results may vary depending on the JavaScript engine, version, and other factors.

Related benchmarks:

JavaScript spread operator vs Object.assign with empty object literal performance (version: 0)

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

Created: 4 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):