Benchmark: JavaScript spread operator vs Object.assign performance one object

Tests:

Using the spread operator
const secondObject = { moreData: 'foo bar' } const finalObject = { ...secondObject };
Using Object.assign
const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign({}, 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36

Browser/OS: Chrome 86 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	64464312.0 Ops/sec
Using Object.assign	4061211.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is tested?**

MeasureThat.net is testing the performance of two different methods for creating a shallow copy of an object in JavaScript: the spread operator (`...`) and `Object.assign()`. The benchmark is measuring how fast each method can create a new object with some of the properties from an existing object.

**Options compared**

There are two options being compared:

1. **Spread operator (`...`)**: This method creates a new object by iterating over the properties of the original object and adding them to the new object using the spread operator.
2. **Object.assign()**: This method creates a new object by copying the properties from an existing object.

**Pros and cons**

* **Spread operator (`...`)**:
	+ Pros: concise, readable, and easy to understand for most developers.
	+ Cons: may not be as efficient as `Object.assign()` in older browsers or environments where support is limited.
* **Object.assign()**:
	+ Pros: widely supported across different browsers and environments, can handle more complex cases such as arrays and objects with functions.
	+ Cons: less readable than the spread operator for some developers.

Other considerations:

* The benchmark does not account for other factors that might affect performance, such as object size or complexity. For example, if the original object is very large, `Object.assign()` may perform better due to its ability to handle arrays and objects with functions.
* The benchmark does not consider security implications. For example, using `Object.assign()` with an untrusted source can lead to security vulnerabilities.

**Libraries and special JS features**

In this benchmark, no libraries are used beyond the standard JavaScript features. However, it's worth noting that in other cases, MeasureThat.net may use additional libraries or features, such as async/await for handling asynchronous operations.

No special JavaScript features are used in this specific benchmark.

**Other alternatives**

If you want to create a shallow copy of an object in JavaScript, there are other methods available:

* **Object.assign() with an empty object**: `const finalObject = Object.assign({}, secondObject);`
* **Array.prototype.slice() and Array.prototype.concat()**: `const finalObject = { ...secondObject };` (not exactly the same as the spread operator, but achieves similar results)
* **JSON.parse(JSON.stringify())**: Not recommended due to its complexity and potential security risks.

Keep in mind that each of these alternatives has its own trade-offs and may not be suitable for all use cases. The spread operator (`...`) is generally considered the most modern and efficient way to create a shallow copy of an object in JavaScript.

Related benchmarks:

JavaScript spread operator vs Object.assign performance one object (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):