Benchmark: JavaScript spread operator vs create object performance vs destructuring

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Create new object
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { sampleData: firstObject.sampleData, moreData: secondObject.moreData };
destructuring
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const {sampleData} = firstObject; const {moreData} = secondObject; const finalObject = { sampleData, moreData };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Create new object
destructuring

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	6939519.0 Ops/sec
Create new object	1103730048.0 Ops/sec
destructuring	1020997632.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, hosted on MeasureThat.net, compares the performance of three approaches for creating a new object in JavaScript: using the spread operator (`...`), manually creating a new object by assigning properties from two existing objects (`const finalObject = {...firstObject, ...secondObject}`), and destructuring assignment (`{...firstObject, ...secondObject}`). The benchmark aims to determine which approach is the most efficient.

**Options Compared**

The three options being compared are:

1. **Using the spread operator**: This method uses the `...` operator to create a new object by spreading the properties of one or more source objects.
2. **Manual object creation**: This method involves creating a new object and assigning its properties from two existing objects using the dot notation (`const finalObject = {...firstObject, ...secondObject}`).
3. **Destructuring assignment**: This method uses destructuring assignment to extract properties from two existing objects and assigns them to a new object (`{...firstObject, ...secondObject}`).

**Pros and Cons of Each Approach**

1. **Using the spread operator**:
	* Pros: concise, expressive, and readable.
	* Cons: may lead to performance issues if used excessively or with large datasets.
2. **Manual object creation**:
	* Pros: control over the object structure, avoids potential performance issues with the spread operator.
	* Cons: more verbose and less readable than using the spread operator.
3. **Destructuring assignment**:
	* Pros: concise and expressive, allows for easy modification of individual properties.
	* Cons: may lead to performance issues if used excessively or with large datasets.

**Library and Special JS Features**

None of the benchmark test cases use a specific library. However, they do utilize JavaScript's destructuring assignment feature, which was introduced in ECMAScript 2015 (ES6). This feature allows for easy extraction of properties from objects.

**Other Alternatives**

In addition to the three options being compared, other approaches for creating a new object might include:

* Using `Object.assign()` or `Object.create()`
* Utilizing a library like Lodash or underscore.js
* Implementing custom object creation logic

However, these alternatives are not part of the provided benchmark.

**Benchmark Preparation Code**

The benchmark preparation code is empty, indicating that MeasureThat.net will handle script and HTML preparation.

Related benchmarks:

JavaScript spread operator vs create object performance vs destructuring (version: 0)

Comparing performance of: Using the spread operator vs Create new object vs destructuring

Created: one year ago by: Guest

Jump to the latest result

Using the spread operator

Create new object

destructuring

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