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 = _.extend({}, 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: 6 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

Browser/OS: Chrome 70 on Windows

View result in a separate tab

Test name	Executions per second
extend	1404479.1 Ops/sec
cloneDeep	533679.6 Ops/sec
JSON.*	333054.1 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 provided benchmark.

**Benchmark Overview**

The benchmark tests three different approaches to create a copy of an object:

1. `extend`
2. `cloneDeep` (using the Lodash library)
3. `JSON.parse(JSON.stringify(myObj))`

**Options Compared**

Each option has its own pros and cons:

* **Extend**: The `extend` method creates a new object with the same properties as the original, but it modifies the original object. It's generally faster than `cloneDeep` because it doesn't require creating a deep copy of the entire object.
* **Clone Deep (Lodash)**: The `cloneDeep` method creates a deep copy of the entire object, including nested objects and arrays. This approach is more accurate for complex data structures but comes with a performance cost due to the overhead of cloning each property.
* **JSON.parse(JSON.stringify(myObj))**: This approach uses JSON serialization to create a new object that's identical to the original. However, it has limitations when dealing with non-serializable objects (e.g., functions) and doesn't account for differences in data types.

**Libraries Used**

The `cloneDeep` method relies on the Lodash library, which provides a range of utility functions for working with JavaScript data structures.

**Special JS Feature/Syntax**

None mentioned explicitly. However, it's worth noting that the use of `JSON.parse(JSON.stringify(myObj))` assumes a specific serialization format and might not work as expected with more complex or non-standard input data.

**Other Alternatives**

While not directly compared in this benchmark, other alternatives for creating object copies include:

* Using the spread operator (`{...myObj}`)
* Utilizing `Object.assign()` to create a shallow copy
* Implementing a custom object cloning function

These alternatives might offer varying trade-offs between performance, accuracy, and code complexity.

**Benchmark Results**

The provided benchmark results show the execution times for each test case across different browsers and platforms. The results suggest that:

* `extend` is generally the fastest option.
* `cloneDeep` (using Lodash) provides a good balance between speed and accuracy.
* `JSON.parse(JSON.stringify(myObj))` performs poorly due to its limitations in handling complex data structures.

These findings can help developers choose the most suitable approach for their specific use cases.

Related benchmarks:

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

Comparing performance of: extend vs cloneDeep vs JSON.*

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