Benchmark: angular.copy vs JSON.parse(JSON.stringify()) vs structuredClone

angular.copy vs JSON.parse(JSON.stringify()) vs structuredClone (version: 0)

FIguring out the performance differences between using the operations in the name on copying an array of objects considering the fact that other methods of copying (slice, concat, etc.) are shallow copies and end up being by reference instead of by value.

Comparing performance of: angular.copy() vs JSON.parse(JSON.stringify()) vs structuredClone(origArr)

Created: one year ago by: Guest

Jump to the latest result

HTML Preparation code:

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body>
  </body>
</html>

Script Preparation code:

var origArr = [
 {
  name  : "obj1",
  val   : 1,
  color : "blue"
 },
  {
  name  : "obj2",
  val   : 2,
  color : "red"
 },
  {
  name  : "obj3",
  val   : 3,
  color : "green"
 },
  {
  name  : "obj4",
  val   : 4,
  color : "orange"
 }
];

var newArr = [];

Tests:

angular.copy()
newArr = angular.copy(origArr);
JSON.parse(JSON.stringify())
newArr = JSON.parse(JSON.stringify(origArr));
structuredClone(origArr)
newArr = structuredClone(origArr);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
angular.copy()
JSON.parse(JSON.stringify())
structuredClone(origArr)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a benchmark test on MeasureThat.net, which compares the performance of three different methods for copying an array of objects: `angular.copy()`, `JSON.parse(JSON.stringify())`, and `structuredClone()`. The goal is to determine which method provides the most efficient way to create a deep copy of the array.

**Test Cases**

There are three test cases:

1. **`angular.copy()`**: This method uses Angular's `copy` function to create a new array with a deep copy of each object in the original array.
2. **`JSON.parse(JSON.stringify())`**: This method uses the `JSON.stringify()` function to serialize the original array, and then parses the resulting string back into an object using `JSON.parse()`. The `JSON.stringify()` function creates a deep copy of each object in the original array, but this method is more computationally expensive due to the additional serialization step.
3. **`structuredClone()`**: This method uses the `structuredClone()` function, which was introduced in ECMAScript 2022, to create a deep copy of the original array.

**Options Compared**

The three methods are compared based on their performance, with the goal of determining which one is the fastest.

**Pros and Cons of Each Method**

1. **`angular.copy()`**:
	* Pros: Fastest and most efficient method.
	* Cons: Requires AngularJS to be included in the test environment.
2. **`JSON.parse(JSON.stringify())`**:
	* Pros: Works with any JavaScript engine that supports JSON serialization.
	* Cons: More computationally expensive due to the additional serialization step.
3. **`structuredClone()`**:
	* Pros: Fast and efficient, with no additional dependencies required.
	* Cons: Requires ECMAScript 2022 support.

**Library Used**

The `angular.copy()` method uses AngularJS's `copy` function, which is a utility function for creating deep copies of objects. The `JSON.parse(JSON.stringify())` method relies on the `JSON.stringify()` function to serialize the original array, and then parses the resulting string back into an object using `JSON.parse()`. The `structuredClone()` method uses the `structuredClone()` function, which is a new function introduced in ECMAScript 2022 for creating deep copies of objects.

**Special JavaScript Feature/Syntax**

The `structuredClone()` method uses a special JavaScript feature known as "structured clone", which was introduced in ECMAScript 2022. This feature allows for more efficient and secure cloning of complex data structures, such as arrays and objects.

**Other Alternatives**

If the `angular.copy()` method is not available or is not preferred, other alternatives can be used to create a deep copy of an array, such as:

* Using the `slice()` method with a shallow copy: `newArr = origArr.slice();`
* Using the `concat()` method with a shallow copy: `newArr = origArr.concat();`
* Using a library like Lodash's `cloneDeep` function
* Using a recursive function to create a deep copy of each object in the array

However, these alternatives may not be as efficient or reliable as the methods tested on MeasureThat.net.

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
angular.copy()	772346.3 Ops/sec
JSON.parse(JSON.stringify())	265098.7 Ops/sec
structuredClone(origArr)	141748.2 Ops/sec

Related benchmarks:

angular.copy vs JSON.parse(JSON.stringify()) vs structuredClone (version: 0)

FIguring out the performance differences between using the operations in the name on copying an array of objects considering the fact that other methods of copying (slice, concat, etc.) are shallow copies and end up being by reference instead of by value.

Comparing performance of: angular.copy() vs JSON.parse(JSON.stringify()) vs structuredClone(origArr)

Created: one year ago by: Guest

Jump to the latest result

angular.copy()

JSON.parse(JSON.stringify())

structuredClone(origArr)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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