Benchmark: Shallow copy vs structuredClone

Script Preparation code:

var MyObject = {
  string: 'string',
  number: 123456789,
  boolean: true,
  obj: {
    stringify: 'string',
    number: '123456789'
  }
};
var copied = undefined;

Tests:

Shallow copy
copied = { ...MyObject }
structuredClone
copied = structuredClone(MyObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Shallow copy
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Windows

View result in a separate tab

Shallow copy

10.4M/s

structuredClone

464K/s

View exact numbers

Test name	Executions per second
✓ Shallow copy	10,371,631 Ops/sec
structuredClone	464,315 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 and explain what's being tested.

**What is being tested?**

The benchmark compares two approaches to create a copy of an object: shallow copying using the spread operator (`...`) and creating a deep copy using `structuredClone`.

In JavaScript, objects are mutable by default. This means that when you modify a property of an object, it affects all references to that object. To avoid this, developers often need to create a new copy of the object, which is where shallow copying comes in.

However, shallow copying only creates a new object with references to the same nested objects as the original. If the nested objects also contain mutable properties (like arrays or other objects), modifying those will still affect both the original and the copied objects.

`structuredClone`, on the other hand, creates a deep copy of an object, including all its nested properties. This ensures that any modifications made to the copied object do not affect the original.

**Options compared**

The two options being compared are:

1. **Shallow Copy**: Creates a new object with references to the same nested objects as the original.
	* Pros:
		+ Faster and more efficient, since it only creates a new reference to the nested objects instead of recreating them entirely.
	* Cons:
		+ Does not ensure that modifications to the copied object do not affect the original, in cases where the nested objects contain mutable properties.
2. **structuredClone**: Creates a deep copy of an object, including all its nested properties.
	* Pros:
		+ Ensures that modifications to the copied object do not affect the original, even if the nested objects contain mutable properties.
	* Cons:
		+ Slower and more memory-intensive, since it recreates the entire nested structure.

**Library used**

In this benchmark, `structuredClone` is used to create a deep copy of the object. `structuredClone` is a relatively new feature in JavaScript, introduced in ECMAScript 2020 (ES2020). It provides a way to clone objects, arrays, and other data structures, including all their properties, without creating new references to nested objects.

**Special JS feature/syntax**

There are no special JavaScript features or syntax mentioned in this benchmark. However, it's worth noting that `structuredClone` is not supported by older browsers like Internet Explorer, Edge 12 and earlier, and some mobile devices.

**Other alternatives**

If `structuredClone` is not available or supported in your target environment, you may need to use other methods to create a deep copy of an object. Some examples include:

* Using the `JSON.parse(JSON.stringify(obj))` method (note that this can lead to unexpected behavior if the object contains functions or other non-serializable properties).
* Implementing a custom recursive function to clone the object.
* Using a library like Lodash, which provides a `cloneDeep` function for creating deep copies of objects.

In summary, the benchmark compares two approaches to create a copy of an object: shallow copying using the spread operator and creating a deep copy using `structuredClone`. The choice between these options depends on your specific use case, performance requirements, and target environment.

Shallow copy vs structuredClone (version: 0) Benchmark.js

Comparing performance of: `Shallow copy vs structuredClone`

Created: 3 years ago by: Guest

Go to the latest result

Shallow copy

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Shallow copy vs structuredClone (version: 0) Benchmark.js

Comparing performance of: Shallow copy vs structuredClone

Created: 3 years ago by: Guest

Go to the latest result

Shallow copy

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Shallow copy vs structuredClone`