Benchmark: JavaScript spread operator vs direct assignment performance

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using explicit assignment
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { sampleData: firstObject.sampleData, moreData: secondObject.moreData }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using explicit assignment

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	40427600.0 Ops/sec
Using explicit assignment	158889056.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this JavaScript microbenchmark.

**Overview**

The benchmark compares the performance of two approaches to merge objects: using the spread operator (`...`) and explicit assignment (`const finalObject = { ...firstObject, ...secondObject }`). The goal is to determine which approach is faster for creating a new object by combining two existing objects.

**Options compared**

The two options being compared are:

1. **Using the spread operator**: This approach uses the `...` syntax to merge the properties of two objects into a new object.
2. **Explicit assignment**: This approach uses explicit property assignments (`const finalObject = { ...firstObject, ...secondObject }`) to create a new object.

**Pros and Cons**

* **Using the spread operator**:
	+ Pros: concise, expressive syntax, easy to read and write.
	+ Cons: may be slower due to potential overhead of function calls or interpreter optimizations.
* **Explicit assignment**:
	+ Pros: potentially faster since it avoids the overhead of the spread operator's function call.
	+ Cons: more verbose and less readable than using the spread operator.

**Library/ Framework**

There is no explicit mention of a library or framework in this benchmark. However, it's worth noting that modern JavaScript engines often provide built-in optimizations for certain operations, which can affect performance. In this case, the use of the spread operator might incur additional overhead due to its function call nature.

**Special JS feature/syntax**

The `...` syntax used with the spread operator is a relatively recent addition to JavaScript (introduced in ECMAScript 2015). It allows for concise object merging and has become a popular pattern in modern JavaScript development.

**Other alternatives**

There are other ways to merge objects in JavaScript, such as using the `Object.assign()` method or the `merge()` function from libraries like Lodash. However, these approaches are not explicitly being compared in this benchmark.

**Benchmark preparation code**

The script preparation code is empty, which suggests that the benchmark is designed to focus on the performance difference between the two object merging approaches, without any additional setup or overhead.

Overall, this benchmark provides a simple and concise way to compare the performance of two common JavaScript patterns for merging objects.

Related benchmarks:

JavaScript spread operator vs direct assignment performance (version: 0)

Comparing performance of: Using the spread operator vs Using explicit assignment

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using explicit assignment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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