Benchmark: Clone vs JSON.stringify+JSON.parse

Tests:

Clone
const clone = (items) => items.map(item => Array.isArray(item) ? clone(item) : item); var nestedArray = [[1], [2], [3]]; var arrayCopy = clone(nestedArray); // Make some changes arrayCopy[0][0] = '?'; // change shallow element arrayCopy[1][0] = '?'; // change nested element
JSON.stringify+JSON.parse
var nestedArray = [[1], [2], [3]]; var arrayCopy = JSON.parse(JSON.stringify(nestedArray)); // Make some changes arrayCopy[0][0] = '?'; // change shallow element arrayCopy[1][0] = '?'; // change nested element
Slice
const clone = (items) => items.map(item => item.slice()); var nestedArray = [[1], [2], [3]]; var arrayCopy = clone(nestedArray); // Make some changes arrayCopy[0][0] = '?'; // change shallow element arrayCopy[1][0] = '?'; // change nested element
Slice(0)
const clone = (items) => items.map(item => item.slice(0)); var nestedArray = [[1], [2], [3]]; var arrayCopy = clone(nestedArray); // Make some changes arrayCopy[0][0] = '?'; // change shallow element arrayCopy[1][0] = '?'; // change nested element

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Clone
JSON.stringify+JSON.parse
Slice
Slice(0)

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 11 days ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what's being tested, the options compared, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark definition is a high-level description of the test case. In this case, there are four individual test cases:

1. "Clone"
2. "JSON.stringify+JSON.parse"
3. "Slice"
4. "Slice(0)"

Each test case has its own unique implementation for creating an array copy.

**Options Compared**

The options compared in this benchmark are different ways to create an array copy:

1. **"Clone"`: This method uses a recursive function `clone` that maps over the input array, cloning each element recursively if it's an array.
2. **"JSON.stringify+JSON.parse"`: This method uses `JSON.stringify` to serialize the original array and then parses the resulting string back into an array using `JSON.parse`.
3. **"Slice"`: This method uses the `slice` method on the input array, which returns a shallow copy of the array.
4. **"Slice(0)"`: Similar to "Slice", but with an additional parameter `0`, which creates a deep copy of the array (i.e., cloning all nested arrays recursively).

**Pros and Cons**

Here's a brief summary of each approach:

* **"Clone"`:
	+ Pros: Can handle nested arrays, can be more flexible if needed.
	+ Cons: Can be slower than other methods due to recursive function calls.
* **"JSON.stringify+JSON.parse"`:
	+ Pros: Fast, works well for shallow arrays.
	+ Cons: May not work as expected with deeply nested arrays or objects.
	+ Note: This method can lead to issues when dealing with circular references in the input array.
* **"Slice"`:
	+ Pros: Fast and efficient, creates a shallow copy of the array.
	+ Cons: Does not handle nested arrays well; only copies the top-level elements.
* **"Slice(0)"**:
	+ Pros: Creates a deep copy of the array, handling nested arrays recursively.
	+ Cons: May be slower than other methods due to deeper cloning.

**Library Usage**

None of the test cases use any external libraries. However, `JSON.stringify` and `JSON.parse` are built-in functions in JavaScript.

**Special JS Features or Syntax**

There is no special JavaScript feature or syntax used in this benchmark.

**Other Considerations**

* The benchmark measures the execution speed of each method across multiple runs (executions per second).
* The results are likely to be influenced by factors like browser and device platform, which affects the performance.
* This benchmark primarily targets developers working with JavaScript and arrays, but it can also provide insight into general optimization techniques for cloning data structures.

**Alternatives**

Other alternatives for creating array copies in JavaScript include:

1. `Array.prototype.slice.call()` or `Array.prototype.slice.apply()`
2. `Array.from()`
3. `Array.copyOf()` (some browsers support this method)
4. Using a library like Lodash (`_.cloneDeep()`)
5. Using a utility function from a framework like React or Angular.

Keep in mind that the choice of array copy method depends on the specific use case and requirements. This benchmark can help developers understand the trade-offs between different approaches.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
Clone	1006323.0 Ops/sec
JSON.stringify+JSON.parse	1006868.0 Ops/sec
Slice	15432200.0 Ops/sec
Slice(0)	15110610.0 Ops/sec

Related benchmarks:

Clone vs JSON.stringify+JSON.parse (version: 0)

Comparing performance of: Clone vs JSON.stringify+JSON.parse vs Slice vs Slice(0)

Created: 4 years ago by: Guest

Jump to the latest result

Clone

JSON.stringify+JSON.parse

Slice

Slice(0)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 11 days ago):