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

angular.copy vs JSON.parse(JSON.stringify()) (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 _.colneDeep()

Created: 6 years 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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.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));
_.colneDeep()
newArr = _.cloneDeep(origArr);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
angular.copy()
JSON.parse(JSON.stringify())
_.colneDeep()

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The benchmark is designed to measure the performance differences between three methods: `angular.copy()`, `JSON.parse(JSON.stringify())`, and `_.cloneDeep()` (which seems to be a typo, it should be `_cloneDeep`).

**Test Case Breakdown**

1. **`angular.copy(origArr)`**: This method is used to create a deep copy of the original array `origArr`. In JavaScript, arrays are objects, and when you assign an array to a new variable, you're not creating a new object, but rather referencing the same one. Therefore, any changes made to the new array will also affect the original array.

2. **`JSON.parse(JSON.stringify(origArr))`**: This method is used to create a deep copy of the original array `origArr`. The `JSON.stringify()` function converts an object to a JSON string, and then `JSON.parse()` parses that string back into an object. However, since arrays are not directly serializable in JSON, this method actually creates a shallow copy, which means it only copies the references to the elements in the array, not the elements themselves.

3. **`_.cloneDeep(origArr)`**: This method is used to create a deep copy of the original array `origArr`. The underscore library provides various utility functions for copying objects and arrays, including `_cloneDeep()`. This method will recursively create new copies of all nested objects and arrays.

**Options Compared**

In this benchmark, we have three options:

* **Shallow Copy**: `JSON.parse(JSON.stringify(origArr))` creates a shallow copy of the array by only copying the references to the elements.
* **Deep Copy**: `angular.copy(origArr)` and `_.cloneDeep(origArr)` create deep copies of the array by recursively creating new copies of all nested objects and arrays.

**Pros and Cons**

* **Shallow Copy (`JSON.parse(JSON.stringify(origArr))`)**:
	+ Pros: Fast, as it only needs to copy the references.
	+ Cons: May not be suitable for large datasets or complex objects, as changes made to the new array will affect the original array.
* **Deep Copy (`angular.copy(origArr)` and `_.cloneDeep(origArr)`)**:
	+ Pros: Ensures that all nested objects and arrays are copied recursively, ensuring data integrity.
	+ Cons: Slower than shallow copy, as it needs to create multiple copies of complex objects.

**Library**

* **`_cloneDeep()`**: The underscore library provides various utility functions for copying objects and arrays. `_cloneDeep()` is used in this benchmark to create a deep copy of the original array `origArr`.

**Special JS Feature or Syntax**

There is no special JS feature or syntax being tested in this benchmark.

**Alternatives**

Other alternatives for creating copies of arrays include:

* **`slice()`**: Creates a shallow copy of an array by returning a new array with references to the same elements.
* **`concat()`**: Creates a shallow copy of an array by concatenating the original array with a new array.
* **`Object.assign()`**: Creates a shallow copy of an object (not specifically designed for arrays, but can be used in some cases).

It's worth noting that these alternatives may not provide the same level of data integrity as `angular.copy()` or `_cloneDeep()`, especially when working with complex objects and arrays.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Browser/OS: Chrome 88 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
angular.copy()	606540.1 Ops/sec
JSON.parse(JSON.stringify())	279215.8 Ops/sec
_.colneDeep()	330022.2 Ops/sec

Related benchmarks:

angular.copy vs JSON.parse(JSON.stringify()) (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 _.colneDeep()

Created: 6 years ago by: Guest

Jump to the latest result

angular.copy()

JSON.parse(JSON.stringify())

_.colneDeep()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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