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

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

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())`

Created: 8 years ago by: Guest

Go 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));

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

angular.copy()

1.5M/s

JSON.parse(JSON.stringify())

948K/s

Fastest: angular.copy() (1.6x faster)

View exact numbers

✓ angular.copy(): 1,510,370 ops/sec
• JSON.parse(JSON.stringify()): 947,797 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

angular.copy()

1.7M/s

JSON.parse(JSON.stringify())

1.3M/s

View exact numbers

Test name	Executions per second
✓ angular.copy()	1,691,479 Ops/sec
JSON.parse(JSON.stringify())	1,345,130 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 is being tested.

**Benchmark Definition**

The test is comparing two methods for copying an array of objects in JavaScript: `angular.copy()` and `JSON.parse(JSON.stringify())`.

**What are these methods?**

1. **`angular.copy()`**: This method is part of the AngularJS library, which provides a way to safely copy objects without worrying about circular references or other issues that can arise when using shallow copies like `slice()`, `concat()`, etc.
2. **`JSON.parse(JSON.stringify())`**: This method uses the JSON stringification and parsing mechanisms in JavaScript to create a deep copy of an object.

**Pros and Cons**

**`angular.copy()`**:

* Pros:
	+ Creates a safe, deep copy of objects that can handle complex references and circular dependencies.
	+ No need to worry about manual handling of shallow copies or deep copies.
* Cons:
	+ Only works with AngularJS applications.
	+ May have performance overhead due to the library's functionality.

**`JSON.parse(JSON.stringify())`**:

* Pros:
	+ Works in most JavaScript environments, including Node.js and non-Angular applications.
	+ Can be faster since it doesn't rely on a separate library like `angular.copy()`.
* Cons:
	+ Only works for simple objects with no circular references. When encountering circular references, the function can enter an infinite loop and cause a stack overflow.
	+ Requires manual handling of specific object types (e.g., dates, regex patterns) to avoid issues.

**Library and Syntax**

In this benchmark, `angular.copy()` is used in the script preparation code, while `JSON.parse(JSON.stringify())` is used in another test case. The latter uses a library (`JSON`) that provides the necessary functionality for creating a deep copy of an object.

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Other Alternatives**

Besides the two methods mentioned above:

1. **Manual Shallow Copy**: Using `slice()` or `concat()` to create a shallow copy, which is not as safe as the `angular.copy()` method but can be faster.
2. **Lodash's `cloneDeep()` function**: A popular utility library that provides a deep clone function, similar to `JSON.parse(JSON.stringify())`.
3. **`Object.assign()` and `Array.prototype.slice()` in combination**: A custom approach to create a deep copy by using `Object.assign()` and `Array.prototype.slice()`, which requires more manual handling.

Keep in mind that the choice of method depends on the specific use case, performance requirements, and compatibility with different JavaScript environments.

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

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())

Created: 8 years ago by: Guest

Go to the latest result

angular.copy()

JSON.parse(JSON.stringify())

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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