Benchmark: Testing cloneDeep vs destructuring

HTML Preparation code:

<script src="
https://cdn.jsdelivr.net/npm/lodash.clonedeep@4.5.0/index.min.js
"></script>

Script Preparation code:

var button = {
 id: 'Test',
 icon: 'icon',
};
var state = {
 id: 'State' 
};
var MyObject = {
  description: 'Creates a deep copy of source, which should be an object or an array.',
  myNumber: 123456789,
  myBoolean: true,
  buttons: [button],
  states: [state]
};

var myCopy = null;

Tests:

cloneDeep test
myCopy = _.cloneDeep(MyObject);
Destructuring test
myCopy = {...MyObject, buttons: [button, ...MyObject.buttons], states: [MyObject.state]};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneDeep test
Destructuring test

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/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Windows

View result in a separate tab

Test name	Executions per second
cloneDeep test	219308.5 Ops/sec
Destructuring test	3486188.2 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 to understand what's being tested.

**Benchmark Definition:**
The benchmark is designed to compare two approaches for creating a deep copy of an object in JavaScript:

1. Using `_.cloneDeep` from the Lodash library, which creates a deep clone of an object.
2. Using destructuring assignment (`{...MyObject, buttons: [button, ...MyObject.buttons], states: [MyObject.state]};`), which creates a new object with properties copied from the original object.

**Options Compared:**
The benchmark is comparing two options:

* `_.cloneDeep`: A library function that creates a deep clone of an object.
* Destructuring assignment: A JavaScript syntax that creates a new object by copying selected properties from an existing object.

**Pros and Cons of Each Approach:**

1. **_.cloneDeep**:
	* Pros:
		+ Creates a true deep copy of the object, including nested objects and arrays.
		+ Guarantees that the cloned object is independent of the original object.
	* Cons:
		+ May be slower than destructuring assignment for small objects.
		+ Requires an external library (Lodash) to use.
2. **Destructuring Assignment**:
	* Pros:
		+ Often faster than `_cloneDeep` for small objects.
		+ Does not require an external library.
	* Cons:
		+ May not work as expected if the object has circular references or complex structures.
		+ Does not create a deep copy, but rather a shallow copy of selected properties.

**Library and Purpose:**
The Lodash library (`_.cloneDeep`) provides a function for creating deep clones of objects. The purpose of this function is to ensure that cloned objects are independent of the original object, which can be useful in scenarios where mutation detection or data integrity are crucial.

**Special JS Feature or Syntax:**
The benchmark uses destructuring assignment syntax (`{...MyObject, ...}`), which is a JavaScript feature introduced in ECMAScript 2015 (ES6). This syntax allows for creating new objects by copying selected properties from existing objects. The `...` operator is called the "spread operator" and is used to expand an object into individual key-value pairs.

**Other Alternatives:**
For deep cloning, other alternatives to `_cloneDeep` include:

* `Object.assign()` with a custom function that recursively clones objects
* `JSON.parse(JSON.stringify(obj))`
* Libraries like `deepcopy` or `js-clonedeep`

For destructuring assignment, the spread operator (`...`) is often used in conjunction with methods like `Array.prototype.concat()`, `Object.assign()`, or `SpreadElement`.

Related benchmarks:

Testing cloneDeep vs destructuring (version: 0)

Comparing performance of: cloneDeep test vs Destructuring test

Created: 3 years ago by: Guest

Jump to the latest result

cloneDeep test

Destructuring test

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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