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]};

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 20 runs

Destructuring test

4.6M/s

cloneDeep test

781K/s

Fastest: Destructuring test (5.9x faster)

View exact numbers

✓ Destructuring test: 4,646,722 ops/sec
• cloneDeep test: 781,023 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Destructuring test

3.5M/s

cloneDeep test

219K/s

View exact numbers

Test name	Executions per second
✓ Destructuring test	3,486,188 Ops/sec
cloneDeep test	219,308 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`.

Testing cloneDeep vs destructuring (version: 0) Benchmark.js

Comparing performance of: `cloneDeep test vs Destructuring test`

Created: 3 years ago by: Guest

Go to the latest result

cloneDeep test

Destructuring test

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 20 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Testing cloneDeep vs destructuring (version: 0) Benchmark.js

Comparing performance of: cloneDeep test vs Destructuring test

Created: 3 years ago by: Guest

Go to the latest result

cloneDeep test

Destructuring test

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 20 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `cloneDeep test vs Destructuring test`