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

Created: 7 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>
  </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));

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 month ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
angular.copy()	1614766.4 Ops/sec
JSON.parse(JSON.stringify())	1036280.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks: