Benchmark: Angular Copy vs Lodash Copy Vs native vs other

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

Script Preparation code:

var obj = {
		"crossKey": "EURUSD",
		"dayLowPrice": 1.13045,
		"dayHighPrice": 1.13535,
		"previousClosePrice": 1.13215,
		"priceHist1": 107190404,
		"priceHist2": 250587665,
		"priceHist3": 765906410,
		"priceHist4": 274925633,
		"sparkline": 102925375,
		"spotPrice": 1.1307,
		"midPrice": 1.1307,
		"precision": 4,
		"percentChanged": -0.128,
		"threeMonthForecast": 1.08,
		"sixMonthForecast": 1.04,
		"tradable": true,
		"deliverable": true,
		"key": "EURUSD",
		"displayName": "EUR USD",
		"symbolId": "EURUSD",
		"objectId": 1,
		"assetType": "fx",
		"percentChange": -0.13,
		"selected": true,
		"lineChart": "9991581684158672254519078266440407",
		"barChart": [9, 43, 92, 47, 41, 21, 75, 32, 51, 19, 56, 97, 89, 36, 70, 2, 83, 61, 88, 47, 31, 54],
		"candleChart": "3869460804391469604270058742695196",
		"midPriceModel": "Price: key EURUSD, rate 1.1307, precision 4, appendFrac false, => 1.13 07 ",
		"spotPriceModel": "Price: key EURUSD, rate 1.1307, precision 4, appendFrac false, => 1.13 07 ",
		"crossCurrencies": ["EUR", "USD"],
		"unpackedSparkLine": {
			"price": 2,
			"priceDirection": 1,
			"fiveMinHigh": 4,
			"fiveMinLow": 0,
			"spike": 0,
			"scale": 30
		},
		"priceHistory": [3, 6, 7, 6, 4, 4, 7, 14, 31, 10, 16, 17, 22, 26, 13, 19, 15, 10, 8, 6, 6, 2, 2, 1]
	};

Tests:

Angular copy
angular.copy(obj);
Lodash Deep Clone
_.cloneDeep(obj);
Native
JSON.parse(JSON.stringify(obj))
Other Native
Object.create(obj)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Angular copy
Lodash Deep Clone
Native
Other Native

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 79 on Windows

View result in a separate tab

Test name	Executions per second
Angular copy	206048.0 Ops/sec
Lodash Deep Clone	92472.2 Ops/sec
Native	79611.9 Ops/sec
Other Native	4815067.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Definition**

The benchmark is designed to compare the performance of different methods for copying an object in JavaScript:

1. `angular.copy(obj)`
2. `_.cloneDeep(obj)` (using Lodash)
3. `JSON.parse(JSON.stringify(obj))`
4. `Object.create(obj)`

These methods are being tested on a sample object `obj` that contains various properties, including numbers, strings, and arrays.

**Options Compared**

The benchmark is comparing the performance of four different methods:

1. Angular's `copy` method
2. Lodash's `cloneDeep` method
3. The native `JSON.parse(JSON.stringify(obj))` method
4. A custom "other" method using `Object.create(obj)`

**Pros and Cons**

Here's a brief overview of each method's pros and cons:

1. **Angular Copy**: Pros: Simple, widely supported; Cons: May not be optimized for performance, can create shallow copies.
2. **Lodash Deep Clone**: Pros: Robust, supports deep cloning; Cons: Adds dependency on Lodash library, may have overhead due to object graph analysis.
3. **Native JSON.parse(JSON.stringify(obj))**: Pros: Fast, lightweight; Cons: May not support complex data structures or circular references.
4. **Other Native (Object.create(obj))**: Pros: Simple, no dependencies; Cons: May create shallow copies, can be slower than native methods.

**Library and Purpose**

* Lodash's `cloneDeep` method is used to perform a deep clone of the object, recursively copying all nested properties. This method is useful when you need to create an independent copy of an object with complex relationships.
* Angular's `copy` method is designed to create a shallow copy of an object, which can be sufficient for simple cases but may not work well with complex data structures.

**Special JS Features or Syntax**

None of the test cases explicitly use any special JavaScript features or syntax. However, it's worth noting that Lodash's `cloneDeep` method uses a recursive approach to deep cloning, which relies on JavaScript's built-in `Object.assign()` and `Array.prototype.slice()` methods.

**Alternatives**

If you're looking for alternative methods to copy objects in JavaScript, consider:

* Using a library like Immutable.js or Ramda, which provide robust and efficient data manipulation tools.
* Implementing your own custom cloning logic using `Object.assign()` and other DOM methods.
* Using a functional programming approach with `Array.prototype.map()` and `Array.prototype.reduce()`.
* Leveraging modern JavaScript features like destructuring assignment and template literals to simplify object copying.

Keep in mind that the choice of method ultimately depends on the specific requirements of your use case.

Related benchmarks:

Angular Copy vs Lodash Copy Vs native vs other (version: 0)

compare object copy

Comparing performance of: Angular copy vs Lodash Deep Clone vs Native vs Other Native

Created: 5 years ago by: Guest

Jump to the latest result

Angular copy

Lodash Deep Clone

Native

Other Native

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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