Benchmark: spread vs clone - MeasureThat.net

Script Preparation code:

var list = ["test", "apple", "banana", "peach", "123", "foo", "bar", "tree", "dog"];

Tests:

structuredClone
const copy = window.structuredClone(list);
spread
const copy = [...list];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
structuredClone
spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
structuredClone	1613202.9 Ops/sec
spread	69825752.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 the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition:**

The benchmark definition provides two options for creating a copy of an array: using `window.structuredClone()` or using the spread operator (`[...list];`).

**Options Compared:**

1. **structuredClone()**: This method is designed to create a deep clone of an object, including arrays. It's a more modern approach to cloning objects in JavaScript, introduced in ECMAScript 2022.
2. **Spread Operator (`[...]`)**: This operator creates a new array by copying the elements of an existing array.

**Pros and Cons:**

1. **structuredClone()**:
	* Pros:
		+ Creates a deep clone, which means it recursively copies all nested objects and arrays.
		+ Designed for performance-critical applications where cloning is essential.
	* Cons:
		+ Requires modern JavaScript engines to support (Chrome 92 and above).
2. **Spread Operator (`[...]`)**:
	* Pros:
		+ Fast and efficient, as it only copies the top-level elements of an array.
		+ Widely supported by modern JavaScript engines.
	* Cons:
		+ Only creates a shallow copy, which may not be suitable for nested objects or arrays.

**Library:**

None is mentioned in this benchmark. However, `window.structuredClone()` uses the Web API to implement deep cloning.

**Special JS Feature/Syntax:**

The use of `window.structuredClone()` introduces a modern JavaScript feature that's only available from ECMAScript 2022 onwards. This might affect compatibility with older browsers or environments.

Now, let's examine the individual test cases:

1. **Test Case:** "structuredClone"
	* The benchmark definition uses `window.structuredClone(list)` to create a deep clone of the array `list`.
	* The test measures the execution time of this operation.
2. **Test Case:** "spread"
	* The benchmark definition uses `[...list]` to create a shallow copy of the array `list`.
	* The test measures the execution time of this operation.

**Other Alternatives:**

If you need to clone an object or array and don't want to use `structuredClone()` or the spread operator, some alternative methods include:

1. Using a library like Lodash's `cloneDeep()`
2. Implementing your own recursive cloning function
3. Using `Array.prototype.slice()` (which creates a shallow copy)

Related benchmarks:

spread vs clone (version: 0)

Comparing performance of: structuredClone vs spread

Created: one year ago by: Guest

Jump to the latest result

structuredClone

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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