Benchmark: Angular Copy vs Angular Copy w/ Depth vs Lodash Copy vs Lodash Copy Deep vs JSON

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);
Angular copy depth 2
angular.copy(obj, {}, 2);
Lodash Clone
_.clone(obj);
Lodash Deep Clone
_.cloneDeep(obj);
To JSON and Back
JSON.parse(JSON.stringify(obj));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Angular copy
Angular copy depth 2
Lodash Clone
Lodash Deep Clone
To JSON and Back

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Opera 112 on Windows

View result in a separate tab

Test name	Executions per second
Angular copy	480869.7 Ops/sec
Angular copy depth 2	493231.9 Ops/sec
Lodash Clone	498929.9 Ops/sec
Lodash Deep Clone	208069.4 Ops/sec
To JSON and Back	240630.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided JSON represents a benchmarking test case, where users can compare different approaches to create a copy of an object in JavaScript.

**Benchmark Definition**
The benchmark definition specifies the JavaScript code that will be executed. In this case, we have four individual test cases:

1. `angular.copy(obj);` - Angular's built-in `copy` method.
2. `angular.copy(obj, {}, 2);` - Angular's `copy` method with an optional depth parameter set to 2.
3. `_.clone(obj);` - Lodash's `clone` function.
4. `_.cloneDeep(obj);` - Lodash's `cloneDeep` function.

These test cases compare the performance of different libraries (Angular and Lodash) in creating object copies.

**Options Compared**

The options compared are:

* Angular's built-in `copy` method
* Angular's `copy` method with an optional depth parameter set to 2
* Lodash's `clone` function
* Lodash's `cloneDeep` function

These options represent different approaches to creating object copies. The primary difference lies in the library used and, for Angular's `copy` method, the presence or absence of a depth parameter.

**Pros and Cons**

Here's a brief summary of each option:

1. **Angular's built-in `copy` method**: Pros:
	* Part of the Angular framework, so familiar to developers
	* Typically faster due to optimized implementation
Cons:
	* Limited flexibility (no adjustable depth)
2. **Angular's `copy` method with optional depth parameter**: Pros:
	* Offers more control over copying process (adjustable depth)
Cons:
	* Slower than the built-in method (due to added complexity)
3. **Lodash's `clone` function**: Pros:
	* Flexible and customizable
	* Part of a larger library, so may have additional features
Cons:
	* Typically slower than Angular's methods due to overhead
4. **Lodash's `cloneDeep` function**: Pros:
	* Specifically designed for deep object copies
	* May be faster than `clone` due to optimized implementation
Cons:
	* Not as flexible as `clone` (limited to deep copies)

**Browser Results**
The latest benchmark results show the performance of each test case on an Opera 112 browser:

| Test Case | Execution Speed (per second) |
| --- | --- |
| Lodash Clone | 498929.875 |
| Angular Copy Depth 2 | 493231.90625 |
| Angular Copy | 480869.71875 |
| To JSON and Back | 240630.296875 |
| Lodash Deep Clone | 208069.390625 |

These results indicate that Lodash's `clone` function is the fastest, followed closely by Angular's `copy` method with an optional depth parameter.

**Conclusion**
The benchmarking test case provides a useful comparison of different approaches to creating object copies in JavaScript. While each option has its pros and cons, the results suggest that Lodash's `clone` function and Angular's `copy` method with adjustable depth are the most suitable choices for object copying tasks.

Related benchmarks:

Angular Copy vs Angular Copy w/ Depth vs Lodash Copy vs Lodash Copy Deep vs JSON (version: 0)

compare object copy

Comparing performance of: Angular copy vs Angular copy depth 2 vs Lodash Clone vs Lodash Deep Clone vs To JSON and Back

Created: 7 years ago by: Guest

Jump to the latest result

Angular copy

Angular copy depth 2

Lodash Clone

Lodash Deep Clone

To JSON and Back

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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