Benchmark: Lodash cloneDeep vs structuredClone vs cloneObject (custom func)

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: 'Creates a deep copy of source, which should be an object or an array.',
  myNumber: 123456789,
  myBoolean: true,
  jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...'
  }
};

var myCopy = null;

function cloneObject(o) {
	if (typeof o !== 'object' || o === null) return o;

	let out = Array.isArray(o) ? [] : {};

	for (let k in o) {
		out[k] = (typeof o[k] === "object" && o[k] !== null)
			? cloneObject(o[k])
			: o[k];
	}

	return out;
}

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);
My shitty simple clone logic
myCopy = cloneObject(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
My shitty simple clone logic

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 dive into the benchmark and explain what's being tested.

The provided JSON represents a JavaScript microbenchmarking test case on MeasureThat.net. The test measures the performance of three different approaches to create a deep copy of an object:

1. **Lodash cloneDeep**: The `cloneDeep` function from the Lodash library is used to create a deep copy of the input object, `MyObject`. Lodash is a popular JavaScript utility library that provides various functions for tasks like array manipulation, object creation, and more.
2. **Native structuredClone**: The `structuredClone` function from the Web APIs (WebAssembly API) is used to create a deep copy of the input object, `MyObject`. This function was introduced in recent browsers as a part of the Web Assembly specification.
3. **Custom clone logic (My shitty simple clone logic)**: A custom function, `cloneObject`, is defined by the test author to create a deep copy of the input object, `MyObject`. This implementation is intentionally simplistic and may not be suitable for production use.

Let's analyze each approach:

**Pros and Cons**

1. **Lodash cloneDeep**: Pros:
	* Well-tested and widely used library.
	* Handles complex data structures like arrays and objects with nested properties.
Cons:
	* Adds extra overhead due to the size of the Lodash library (~500 KB).
2. **Native structuredClone**: Pros:
	* Part of the modern web APIs, making it a native function in many browsers.
	* Optimized for performance and handling complex data structures.
Cons:
	* Limited browser support (mainly modern browsers like Chrome, Firefox, and Edge).
3. **Custom clone logic**: Pros:
	* Lightweight (~10-20 lines of code).
	* Can be easily modified to suit specific requirements.
Cons:
	* May not handle complex data structures correctly.
	* Requires maintenance and testing to ensure correctness.

**Library Analysis**

The `structuredClone` function is a relatively new addition to the Web APIs, introduced in recent browsers. It's designed to create a deep copy of an object or array while preserving its structure and properties. This function is optimized for performance and handles complex data structures correctly.

Lodash, on the other hand, is a well-established library with a wide range of features and utility functions. Its `cloneDeep` function is specifically designed for creating deep copies of objects and arrays.

**Special JS Feature or Syntax**

There's no explicit mention of special JavaScript features or syntax in this benchmark. However, the use of ES6-style object literals (e.g., `var MyObject = { ... }`) and modern array methods (`let out = Array.isArray(o) ? [] : {}`) suggest that the test is using relatively modern JavaScript features.

**Other Alternatives**

If you need to create deep copies of objects or arrays in your own code, consider the following alternatives:

1. **JSON.parse(JSON.stringify())**: This method can be used to create a shallow copy of an object or array. However, it's not suitable for creating deep copies, as it only clones the top-level properties and does not recursively clone nested objects.
2. **Object.assign()**: This method can be used to create a shallow copy of an object by assigning its properties to a new object using `Object.assign(newObj, obj)`.
3. **For...in loops or recursive functions**: These methods can be used to create deep copies of objects or arrays by recursively cloning their properties and nested structures.

Keep in mind that these alternatives may have different performance characteristics and may not handle complex data structures correctly.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs cloneObject (custom func) (version: 0)

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs My shitty simple clone logic

Created: 3 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

My shitty simple clone logic

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):