Benchmark: Lodash cloneDeep vs JSON Clone (with array & immer)

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/9.0.5/immer.umd.production.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>

AخA
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/9.0.5/immer.umd.production.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/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,
    testarray: [{
        name: 1
    }, {
        name: 2
    }, {
        name: 3
    }],
    jayson: {
        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
        parse: 'JSON.parse() method parses a JSON string...'
    }
};

var myCopy = null;

​x
 
var MyObject = {    description: 'Creates a deep copy of source, which should be an object or an array.',    myNumber: 123456789,    myBoolean: true,    testarray: [{        name: 1    }, {        name: 2    }, {        name: 3    }],    jayson: {        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',        parse: 'JSON.parse() method parses a JSON string...'    }};​var myCopy = null;

Tests:

immer

myCopy = immer.produce(MyObject, draft => { draft.jayson.parse = 'updated' })

 
myCopy = immer.produce(MyObject, draft => { draft.jayson.parse = 'updated' })

deepclone
myCopy = _.cloneDeep(MyObject); myCopy.jayson.parse = 'updated'
myCopy = _.cloneDeep(MyObject);
myCopy.jayson.parse = 'updated'
Json.stringify
myCopy = JSON.parse(JSON.stringify(MyObject)); myCopy.jayson.parse = 'updated'
myCopy = JSON.parse(JSON.stringify(MyObject));
myCopy.jayson.parse = 'updated'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
immer
deepclone
Json.stringify

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer	240307.6 Ops/sec
deepclone	573483.1 Ops/sec
Json.stringify	508066.0 Ops/sec

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

Let's break down the provided benchmark and explain what's being tested.

Benchmark Overview

The benchmark compares three different approaches to create a deep copy of an object: Lodash cloneDeep, JSON Clone with Immer, and plain old JSON Clone. The test case creates a complex object with nested arrays and objects, and then modifies the jayson.parse property on the copy.

Options Compared

The three options being compared are:

Immer: A library that helps you work with immutable data structures in JavaScript.
Lodash cloneDeep: A function from the Lodash library that creates a deep clone of an object, including arrays and objects.
JSON Clone: A simple way to create a shallow copy of an object using JSON.parse(JSON.stringify()).

Pros and Cons

Immer:
- Pros: Immer provides an immutable data structure approach, which can be safer and more predictable than modifying the original object directly.
- Cons: It requires more code and can be slower due to the need for intermediate drafts.
Lodash cloneDeep:
- Pros: Lodash's cloneDeep is a well-tested and efficient way to create deep clones of objects, including arrays and objects.
- Cons: It uses a library (Lodash), which may not be included in all projects' dependencies.
JSON Clone:
- Pros: Simple and lightweight, with no additional dependencies required.
- Cons: Creates a shallow copy of the object, which may not be suitable for all use cases.

Other Considerations

The benchmark also tests the performance of each approach on different browsers and devices. This is likely to provide more realistic results, as it simulates real-world usage scenarios.

Library and Syntax

The Immer library is used in this benchmark to create an immutable data structure. The produce function creates a new draft of the original object, which is then modified using the provided callback function.

Special JS Feature or Syntax

None mentioned.

Alternatives

If you need to create deep clones of objects, you can consider using other libraries like immer (which is used in this benchmark), lodash, or JSON Patch. For simpler use cases, plain old JSON.parse(JSON.stringify()) may still be sufficient.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares three different approaches to create a deep copy of an object: `Lodash cloneDeep`, `JSON Clone` with Immer, and plain old `JSON Clone`. The test case creates a complex object with nested arrays and objects, and then modifies the `jayson.parse` property on the copy.

**Options Compared**

The three options being compared are:

1. **Immer**: A library that helps you work with immutable data structures in JavaScript.
2. **Lodash cloneDeep**: A function from the Lodash library that creates a deep clone of an object, including arrays and objects.
3. **JSON Clone**: A simple way to create a shallow copy of an object using `JSON.parse(JSON.stringify())`.

**Pros and Cons**

1. **Immer**:
	* Pros: Immer provides an immutable data structure approach, which can be safer and more predictable than modifying the original object directly.
	* Cons: It requires more code and can be slower due to the need for intermediate drafts.
2. **Lodash cloneDeep**:
	* Pros: Lodash's `cloneDeep` is a well-tested and efficient way to create deep clones of objects, including arrays and objects.
	* Cons: It uses a library (Lodash), which may not be included in all projects' dependencies.
3. **JSON Clone**:
	* Pros: Simple and lightweight, with no additional dependencies required.
	* Cons: Creates a shallow copy of the object, which may not be suitable for all use cases.

**Other Considerations**

The benchmark also tests the performance of each approach on different browsers and devices. This is likely to provide more realistic results, as it simulates real-world usage scenarios.

**Library and Syntax**

The Immer library is used in this benchmark to create an immutable data structure. The `produce` function creates a new draft of the original object, which is then modified using the provided callback function.

**Special JS Feature or Syntax**

None mentioned.

**Alternatives**

If you need to create deep clones of objects, you can consider using other libraries like `immer` (which is used in this benchmark), `lodash`, or `JSON Patch`. For simpler use cases, plain old `JSON.parse(JSON.stringify())` may still be sufficient.

Related benchmarks:

Lodash cloneDeep vs JSON Clone (with array & immer) (version: 0)

Comparing performance of: immer vs deepclone vs Json.stringify

Created: 3 years ago by: Guest

Jump to the latest result