Benchmark: deep cloning an object: angularjs angular.copy vs lodash deepclone

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.14/lodash.min.js'></script>

Script Preparation code:

var MyObject = {};

// Iterate to big object 100 000 times
for (var i = 0; i < 100000; i++) {
  MyObject['prop' + i] = {
    description: 'Creates a deep copy of source, which should be an object or an array.',
    myNumber: 123456789,
    myBoolean: true,
    jayson: {
      stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
      parse: 'JSON.parse() method parses a JSON string...'
    }
  };
}

var myCopy = null;

Tests:

angularjs angular.copy
myCopy = angular.copy(MyObject)
lodash cloneDeep
myCopy = _.cloneDeep(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
angularjs angular.copy
lodash cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.5.1

View result in a separate tab

Test name	Executions per second
angularjs angular.copy	0.3 Ops/sec
lodash cloneDeep	16.4 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 benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition:**

The benchmark measures the performance of two approaches for deep cloning an object:

1. `angular.copy` (AngularJS)
2. `_cloneDeep` (Lodash)

**Options Compared:**

* AngularJS (`angular.copy`) vs Lodash (`_cloneDeep`)
* Deep cloning of a large object (100,000 properties) in each iteration

**Pros and Cons:**

* **AngularJS (`angular.copy`):**
	+ Pros:
		- Lightweight and simple to implement
		- Fast execution for small objects
	+ Cons:
		- Not designed for deep cloning; can lead to performance issues with large objects
		- May not work as expected with complex data structures (e.g., arrays of objects)
* **Lodash (`_cloneDeep`):**
	+ Pros:
		- Specifically designed for deep cloning and handling complex data structures
		- Can perform well on large objects, but may have slower execution times compared to AngularJS
	+ Cons:
		- Larger and more complex implementation compared to AngularJS
		- May require additional dependencies (Lodash)

**Library/Lodash:**

* Lodash is a popular JavaScript utility library that provides various functions for tasks like deep cloning.
* `_cloneDeep` is a function from Lodash that creates a deep clone of an object, which is suitable for this benchmark.

**Special JS Feature/Syntax:**

None mentioned in the provided code. However, it's worth noting that the `_.cloneDeep` method uses a technique called " recursive cloning" to create a deep copy of the object. This approach can be slower than other methods but ensures that all nested objects and arrays are properly cloned.

**Other Alternatives:**

* **JSON.parse(JSON.stringify(obj))**: This method is often considered a simple and effective way to deep clone an object in JavaScript. However, it has some limitations, such as not handling cyclic references or null/undefined values.
* **For...of loop with JSON.stringify()**: Another alternative approach would be to use a `for...of` loop to iterate over the properties of the object and create a new object using `JSON.stringify()`.

Keep in mind that these alternatives may have different performance characteristics and handling of edge cases compared to AngularJS and Lodash.

Related benchmarks:

deep cloning an object: angularjs angular.copy vs lodash deepclone (version: 0)

Comparing performance of: angularjs angular.copy vs lodash cloneDeep

Created: 6 years ago by: Guest

Jump to the latest result

angularjs angular.copy

lodash cloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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