Benchmark: Angular clone vs Lodash cloneDeep vs JSON Clone

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var MyObject = {
  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:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Json clone
myCopy = JSON.parse(JSON.stringify(MyObject));
Angular copy
myCopy = angular.copy(MyObject);

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 25 runs

Angular copy

1.5M/s

Lodash cloneDeep

1.2M/s

Json clone

971K/s

Fastest: Angular copy (1.5x faster)

View exact numbers

✓ Angular copy: 1,496,004 ops/sec
• Lodash cloneDeep: 1,203,374 ops/sec
• Json clone: 970,864 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
Lodash cloneDeep
Json clone
Angular copy

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

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

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

Angular copy

2.4M/s

Lodash cloneDeep

2.3M/s

Json clone

2.2M/s

View exact numbers

Test name	Executions per second
✓ Angular copy	2,425,759 Ops/sec
Lodash cloneDeep	2,281,470 Ops/sec
Json clone	2,218,508 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 definition and test cases.

**What is being tested?**

The benchmark tests three different approaches to create a deep copy of an object: `JSON.parse(JSON.stringify(MyObject))`, `angular.copy(MyObject)`, and `_.cloneDeep(MyObject)` using Lodash.

**Options compared:**

1. **JSON Clone**: This method uses the `JSON.parse(JSON.stringify())` trick to create a copy of the object. It serializes the original object into a JSON string, then parses that string back into an object. However, this approach has some limitations:
	* It only works for objects and arrays that can be serialized to JSON.
	* It doesn't preserve the internal structure or properties of the original object.
2. **Angular Copy**: This method uses Angular's `angular.copy()` function to create a copy of the object. It is specifically designed for Angular applications, but it can also be used in other JavaScript environments:
	* It works with any type of object, not just those that can be serialized to JSON.
	* It preserves the internal structure and properties of the original object.
3. **Lodash CloneDeep**: This method uses Lodash's `_.cloneDeep()` function to create a deep copy of the object. It is designed specifically for creating deep copies of complex objects:
	* It works with any type of object, including those that contain other objects or arrays.
	* It preserves the internal structure and properties of the original object.

**Pros and Cons:**

1. **JSON Clone**: Pros:
	* Fast (due to its use of string manipulation).
Cons:
	* Limited functionality (only works for serializable objects).
2. **Angular Copy**: Pros:
	* Preserves internal structure and properties.
Cons:
	* May not be suitable for non-Angular environments.
3. **Lodash CloneDeep**: Pros:
	* Works with any type of object, including complex ones.
Cons:
	* May be slower than JSON clone due to its recursive cloning process.

**Library usage:**

1. **JSON.parse() and JSON.stringify()**: These are built-in JavaScript functions used by the JSON clone method.
2. **angular.copy()**: This function is part of the AngularJS framework, but it can also be used in other JavaScript environments.
3. **_.cloneDeep()**: This function is part of the Lodash library.

**Special JS feature or syntax:**

None mentioned in the benchmark definition.

**Other alternatives:**

1. **ES6 spread operator (`...`)**: While not exactly a deep copy method, it can be used to create shallow copies of objects by spreading their properties into new objects.
2. **For...of loops and Object.assign()**: These can be used to manually iterate over an object's properties and create a new object with those properties.

Keep in mind that the choice of cloning method depends on the specific use case and requirements, such as performance, data structure complexity, and compatibility with different environments.

Angular clone vs Lodash cloneDeep vs JSON Clone (version: 0) Benchmark.js

Comparing performance of: `Lodash cloneDeep vs Json clone vs Angular copy`

Created: 8 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Json clone

Angular copy

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 25 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Angular clone vs Lodash cloneDeep vs JSON Clone (version: 0) Benchmark.js

Comparing performance of: Lodash cloneDeep vs Json clone vs Angular copy

Created: 8 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Json clone

Angular copy

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 25 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Lodash cloneDeep vs Json clone vs Angular copy`