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

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

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);
angular.fromJson(angular.toJson())
newArr = angular.fromJson(angular.toJson(origArr));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare the performance of three methods for copying an array of objects:

1. `angular.copy()`
2. `JSON.parse(JSON.stringify())`
3. `_.cloneDeep()` (using Lodash library)
4. `angular.fromJson(angular.toJson())`

The goal is to determine which method provides a shallow copy, where the original object is not modified when the new copy is created.

**Options Compared**

Each option is compared in terms of its performance, specifically:

* The number of executions per second

**Pros and Cons of Each Approach:**

1. **angular.copy()**: This method creates a shallow copy of the array by iterating over each element and creating a new object with the same properties. However, it only copies the top-level properties, not the nested objects' properties.
	* Pros: Simple to use, no external dependencies required.
	* Cons: Only copies top-level properties, not nested objects; can be slower for large arrays due to iteration overhead.
2. **JSON.parse(JSON.stringify())**: This method uses JSON serialization and deserialization to create a deep copy of the array. However, it only works with JSON-serializable data and can throw errors if there are cyclic references in the original object.
	* Pros: Provides a deep copy, handles nested objects, but requires external dependencies (JSON).
	* Cons: Can be slower due to serialization and deserialization overhead; throws errors on cyclic references.
3. **_.cloneDeep()` (using Lodash library)**: This method provides a more robust way of creating deep copies of objects, handling cycles, and other edge cases.
	* Pros: Provides a deep copy, handles nested objects, cyclic references, and other edge cases; requires external dependencies (Lodash).
	* Cons: Requires additional external dependency (Lodash); can be slower due to object creation overhead.
4. **angular.fromJson(angular.toJson())**: This method uses Angular's `fromJson` function to create a deep copy of the array by serializing it to JSON and then deserializing it back into an object.
	* Pros: Provides a deep copy, handles nested objects; requires external dependencies (Angular).
	* Cons: Requires additional external dependency (Angular); can be slower due to serialization and deserialization overhead.

**Special JS Feature or Syntax**

None of the options explicitly use special JavaScript features or syntax. However, `_.cloneDeep()` uses the Lodash library's internal implementation, which might involve some low-level optimizations not immediately apparent to JavaScript developers.

**Other Considerations**

* The benchmark only measures performance on Chrome 102, running on Windows, with a desktop device platform.
* The executions per second are reported for each test case, but the total execution time or cumulative results are not provided.
* It's worth noting that the `angular.copy()` method is likely implemented in a way that takes advantage of the browser's internal object implementation, which might affect its performance compared to other methods.

**Alternatives**

Other alternatives for creating deep copies of objects include:

1. **for...in loops**: Using a `for...in` loop to iterate over each property and create a new object with the same properties can achieve similar results as the methods tested in this benchmark.
2. **Object.assign()**: Combining the spread operator (`...`) with `Object.assign()` can also be used to create shallow copies of objects, but may not handle nested objects correctly.
3. ** libraries like Immutable.js or Sails.js**: These libraries provide more robust ways of creating immutable data structures and handling cyclic references, which might be suitable for specific use cases.

Keep in mind that each alternative has its own trade-offs in terms of performance, complexity, and additional dependencies required.

Latest run results:

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

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

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
angular.copy()	474922.6 Ops/sec
JSON.parse(JSON.stringify())	290349.8 Ops/sec
_.colneDeep()	285128.5 Ops/sec
angular.fromJson(angular.toJson())	189181.5 Ops/sec

Related benchmarks:

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

Created: 6 years ago by: Guest

Jump to the latest result

angular.copy()

JSON.parse(JSON.stringify())

_.colneDeep()

angular.fromJson(angular.toJson())

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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