Benchmark: JavaScript spread operator vs create object performance

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 };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Create new object

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; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Using the spread operator	8437144.0 Ops/sec
Create new object	1214521472.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down what's being tested in this JavaScript microbenchmark.

**Benchmark Definition**

The benchmark is defined by the JSON object:

```json
{
  "Name": "JavaScript spread operator vs create object performance",
  "Description": null,
  "Script Preparation Code": null,
  "Html Preparation Code": null
}
```

This definition specifies that the benchmark will compare the performance of two approaches: using the spread operator (`...`) to merge objects, and creating a new object by copying properties from existing objects.

**Test Cases**

The benchmark consists of two individual test cases:

1. **Using the spread operator**

```json
{
  "Benchmark Definition": "const firstObject = { sampleData: 'Hello world' }\r\nconst secondObject = { moreData: 'foo bar' }\r\nconst finalObject = {\r\n\t...firstObject,\r\n  \t...secondObject\r\n};",
  "Test Name": "Using the spread operator"
}
```

This test case creates two objects, `firstObject` and `secondObject`, with some sample data. Then, it uses the spread operator (`...`) to merge these two objects into a new object, `finalObject`. The resulting object is expected to have all the properties from both input objects.

2. **Create new object**

```json
{
  "Benchmark Definition": "const firstObject = { sampleData: 'Hello world' }\r\nconst secondObject = { moreData: 'foo bar' }\r\nconst finalObject = {\r\n\tsampleData: firstObject.sampleData,\r\n    moreData: secondObject.moreData\r\n};",
  "Test Name": "Create new object"
}
```

This test case creates two objects, `firstObject` and `secondObject`, with some sample data. Then, it creates a new object, `finalObject`, by copying specific properties from the input objects using assignment syntax (`sampleData: firstObject.sampleData`, `moreData: secondObject.moreData`). The resulting object is expected to have only the specified properties.

**Options Compared**

The benchmark compares two approaches:

1. **Using the spread operator**: This approach uses the spread operator (`...`) to merge two objects into a new object.
2. **Create new object**: This approach creates a new object by copying specific properties from existing objects using assignment syntax.

**Pros and Cons of Each Approach**

**Using the Spread Operator**

Pros:

* Convenient and concise way to merge objects
* Less code required

Cons:

* May be less efficient due to function call overhead and potential use of stack space for intermediate results
* Limited control over property merging (e.g., merging arrays, null/undefined values)

**Create New Object**

Pros:

* More explicit and controlled way to copy properties from existing objects
* Can handle complex data structures like arrays, objects with nested objects, etc.

Cons:

* Requires more code and is less concise than using the spread operator

**Library Considerations**

There are no libraries mentioned in this benchmark. However, if we consider popular JavaScript libraries that use or manipulate objects, some examples include:

* Lodash: Provides various utility functions for working with objects, including `merge` and `pick`.
* Underscore.js: Includes functions like `extend` and `assignIn`, which can be used to merge objects.
* jQuery: Uses the `$.extend()` method to merge objects.

**Special JS Feature or Syntax**

The benchmark uses the spread operator (`...`) to merge objects, which is a feature introduced in ECMAScript 2018 (ES2018). This syntax allows for more concise and expressive way of merging objects.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

Using the spread operator

Create new object

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