Benchmark: Angular Copy vs Lodash Copy vs Object assign

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);
Object assign
Object.assign({}, obj)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Angular copy
Lodash Deep Clone
Object assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Angular copy	315608.9 Ops/sec
Lodash Deep Clone	97035.8 Ops/sec
Object assign	649206.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance and comparison of JavaScript libraries is an essential aspect of software development.

**Benchmark Overview**

The provided benchmark compares the performance of three methods for copying objects:

1. Angular's `copy` function
2. Lodash's `cloneDeep` function (a deep cloning method)
3. The built-in `Object.assign` method

The benchmark uses a sample object, `obj`, which is defined in the "Script Preparation Code" section.

**Options Compared**

Here are the three options compared:

1. **Angular copy**: This method uses Angular's `copy` function to create a shallow copy of the object.
2. **Lodash Deep Clone**: This method uses Lodash's `cloneDeep` function to create a deep clone of the object.
3. **Object assign**: This method uses the built-in `Object.assign` method to create a new object with the same properties as the original object.

**Pros and Cons**

* **Angular copy**:
	+ Pros: lightweight, easy to use
	+ Cons: only creates a shallow copy, which may not be suitable for all scenarios
* **Lodash Deep Clone**:
	+ Pros: creates a deep clone, preserving all nested properties and relationships
	+ Cons: can be slower due to the complexity of the cloning process
* **Object assign**:
	+ Pros: fast, efficient
	+ Cons: can lead to unexpected behavior if the original object is modified while being cloned

**Library Used**

The benchmark uses Lodash's `cloneDeep` function to create a deep clone of the object. Lodash is a popular JavaScript library that provides various utility functions for tasks such as string manipulation, array and object manipulation, and more.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark. The code is straightforward and easy to understand.

**Other Considerations**

When choosing an object copying method, consider the following:

* **Shallow vs Deep Cloning**: If you need to preserve all nested properties and relationships, use a deep cloning method like Lodash's `cloneDeep`. For simpler scenarios where only the top-level properties are needed, a shallow copy using Angular's `copy` or the built-in `Object.assign` may be sufficient.
* **Performance**: If performance is critical, consider using the built-in `Object.assign` method or other optimized copying methods.

**Alternatives**

If you're looking for alternative object copying methods, consider:

* Using the spread operator (`{ ...obj }`) to create a shallow copy of an object.
* Utilizing the `JSON.parse(JSON.stringify(obj))` trick to create a deep clone of an object (although this method can be slow and may not work with all types of objects).
* Implementing your own custom copying function using a recursive approach.

Keep in mind that each method has its trade-offs, and the choice ultimately depends on the specific requirements and constraints of your project.

Related benchmarks:

Angular Copy vs Lodash Copy vs Object assign (version: 0)

compare object copy

Comparing performance of: Angular copy vs Lodash Deep Clone vs Object assign

Created: 6 years ago by: Guest

Jump to the latest result

Angular copy

Lodash Deep Clone

Object assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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