Benchmark: extend vs cloneDeep vs JSON.*

HTML Preparation code:

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

Script Preparation code:

var myObj = {
    "name":"John",
    "age":30,
    "cars": {
        "car1":"Ford",
        "car2":"BMW",
        "car3":"Fiat"
    }
 }

Tests:

extend
let a = Object.assign({}, myObj)
cloneDeep
let a = _.cloneDeep(myObj)
JSON.*
let a = JSON.parse(JSON.stringify(myObj))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
extend
cloneDeep
JSON.*

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

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
extend	4513933.5 Ops/sec
cloneDeep	1246358.2 Ops/sec
JSON.*	780179.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark measures the performance of three methods to create a copy of an object: `Object.assign()`, `_cloneDeep()` from the Lodash library, and `JSON.parse(JSON.stringify())`.

**Options Compared**

1. **`Object.assign()`**: This method creates a shallow copy of an object by iterating over its enumerable properties and assigning them to a new object.
2. **_cloneDeep()`**: This function from Lodash recursively clones a deep nested object, creating a new object with the same structure and values.
3. **`JSON.parse(JSON.stringify())`**: This method serializes the original object as JSON string, then parses it back into an object, effectively creating a deep copy.

**Pros and Cons**

* `Object.assign()`:
	+ Pros: fast, simple, and widely supported.
	+ Cons: only creates a shallow copy (i.e., doesn't recursively clone nested objects).
* `_cloneDeep()`:
	+ Pros: creates a deep copy of the entire object structure, including nested objects.
	+ Cons: slower due to recursive cloning, and may require additional dependencies (Lodash).
* `JSON.parse(JSON.stringify())`:
	+ Pros: also creates a deep copy, but can be slower than `Object.assign()` for large objects due to JSON serialization overhead.
	+ Cons: may not work as expected with certain types of objects (e.g., functions, undefined values) or properties (e.g., dates).

**Library and its Purpose**

* Lodash (_cloneDeep() function): a popular utility library that provides various higher-order functions for functional programming in JavaScript. `_cloneDeep()` is a specific function designed to recursively clone deep nested objects.

**Special JS Features/Syntax**

None mentioned explicitly, but note that the `Object.assign()` method was introduced in ECMAScript 2015 (ES6), and its behavior may vary across older browsers or environments.

**Alternative Approaches**

Other methods for creating object copies include:

* Using `for...in` loops to iterate over object properties and manually assign values.
* Employing library functions like `lodash.clone()` (an alias for `_cloneDeep()`) or other deep cloning libraries.

Keep in mind that the performance differences between these approaches might be negligible in most cases, but this benchmark can help identify potential bottlenecks in specific scenarios.

Related benchmarks:

extend vs cloneDeep vs JSON.* (version: 0)

Comparing performance of: extend vs cloneDeep vs JSON.*

Created: 6 years ago by: Guest

Jump to the latest result

extend

cloneDeep

JSON.*

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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