Benchmark: JavaScript spread operator vs Object.assign performance, non destructive with only one object

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const finalObject = { ...firstObject, };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const finalObject = Object.assign({}, firstObject);

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: 2 years ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 15 on iOS 15.6

View result in a separate tab

Test name	Executions per second
Using the spread operator	14595909.0 Ops/sec
Using Object.assign	4140411.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark is designed to compare the performance of two approaches: using the spread operator (`...`) and `Object.assign` to create a new object by copying data from an existing object, specifically a single object with a sample property. The goal is to determine which approach is faster for non-destructive copying of a single object.

**Options Compared**

Two options are being compared:

1. **Using the spread operator (`...`)**: This method creates a new object by spreading the properties of the original object into the new object.
2. **`Object.assign`**: This method creates a new object by copying the specified properties from an existing object.

**Pros and Cons**

* **Using the spread operator (`...`)**:
	+ Pros: Easy to read, concise syntax, works with modern JavaScript versions.
	+ Cons: May have performance overhead due to the need to create a new object and iterate over its properties.
* `Object.assign`:
	+ Pros: Fast, widely supported across browsers and Node.js versions.
	+ Cons: Can be less readable, especially for those not familiar with the method.

**Library Used**

In this benchmark, none of the test cases use any external libraries. However, it's worth noting that `Object.assign` is a built-in JavaScript method, so no additional library is required.

**Special JS Features/Syntax**

The spread operator (`...`) was introduced in ECMAScript 2018 (ES2018) and became part of the standard in ES2020. It's a modern feature that allows for concise object creation and manipulation.

**Benchmark Preparation Code**

Since there is no Script Preparation Code provided, we'll assume it's not necessary to set up any specific environment or variables before running the benchmark. The focus is solely on comparing the performance of the two approaches.

**Alternatives**

If you need to compare other methods for creating a new object by copying data from an existing object, some alternatives include:

* **`Object.create()`**: Creates a new object with the specified prototype.
* **`Array.prototype.slice()` or `Array.prototype.concat()`**: Can be used to create a shallow copy of an array or object.
* **`JSON.parse(JSON.stringify(object))```: Can be used to create a deep copy of an object.

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the spread operator and `Object.assign`.

Related benchmarks:

JavaScript spread operator vs Object.assign performance, non destructive with only one object (version: 0)

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

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