Benchmark: Lodash cloneDeep VS spread operator with edit

HTML Preparation code:

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

Script Preparation code:

var MyObject = {
  description: 'a',
  myNumber: 123456789,
  myBoolean: true,
  nested: {
  	myNestedNumber: 256,
    myNestedString: "LALAL"
  }
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject); myCopy.nested.myNestedNumber = 300 console.log(myCopy.nested.myNestedNumber)
Spread operator
myCopy = {...MyObject, nested: {...MyObject.nested, myNestedNumber:300}}; console.log(myCopy.nested.myNestedNumber)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Overview**

The test compares the performance of two approaches: using Lodash's `cloneDeep` method and using the spread operator (`...`) to create a copy of an object.

**Lodash cloneDeep**

* **Library:** Lodash is a popular JavaScript utility library.
* **Purpose:** Lodash provides various helper functions, including `cloneDeep`, which creates a deep copy of an object.
* **Pros:**
	+ Creates a deep copy of the object, preserving all nested properties and their values.
	+ Can be useful when working with complex data structures.
* **Cons:**
	+ Adds extra overhead due to the creation of a new object and the copying process.
	+ May not be necessary for simple use cases where a shallow copy is sufficient.

**Spread operator**

* **Purpose:** The spread operator (`...`) is a syntax sugar that creates a new object by spreading the properties of an existing object into a new object.
* **Pros:**
	+ Lightweight and efficient, as it only creates a new reference to the original object's properties.
	+ Suitable for simple use cases where a shallow copy is sufficient.
* **Cons:**
	+ Does not create a deep copy, which means nested properties may be shared between the original and copied objects.
	+ May lead to unexpected behavior if used with complex data structures.

**Other considerations**

* The benchmark measures the execution speed of each approach in different JavaScript engines (in this case, only Chrome 90).
* The `ExecutionsPerSecond` metric provides an estimate of how many times each approach is executed per second.
* The test assumes that the input object (`MyObject`) has a nested structure with multiple properties.

**Alternatives**

Other approaches to creating copies of objects in JavaScript include:

1. Using the `JSON.parse(JSON.stringify(obj))` method, which creates a shallow copy of an object by serializing it as JSON and then parsing it back into an object.
2. Using the `Object.assign()` method with the spread operator (`...`) or other methods to create a new object by copying properties from an existing object.
3. Implementing a custom copy function using recursion, which can be more efficient for large objects but may be slower for small ones.

Keep in mind that the choice of approach depends on the specific use case and performance requirements. In general, Lodash's `cloneDeep` is a safe and reliable option for creating deep copies, while the spread operator is suitable for simple use cases where a shallow copy is sufficient.

Related benchmarks:

Lodash cloneDeep VS spread operator with edit (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 4 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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