Benchmark: JSON Stringification vs. cloneDeep

HTML Preparation code:

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

Tests:

Stringification Deep Copy
let stringyCopy = JSON.parse(JSON.stringify({ "name": { "first": "Billy", "last": "Bob", "middle": "Taylor" }, "vehicles": [{ "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123], "and so forth": { "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123], "test": { "first": "Billy", "last": "Bob", "middle": "Taylor" } } }, { "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123], "junk": { "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123], "so on": { "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123] } } }] }));
_.cloneDeep
let deepCopy = _.cloneDeep({ "name": { "first": "Billy", "last": "Bob", "middle": "Taylor" }, "vehicles": [{ "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123], "and so forth": { "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123], "test": { "first": "Billy", "last": "Bob", "middle": "Taylor" } } }, { "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123], "junk": { "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123], "so on": { "id": "1", "brand": "Toyota", "make": "Camry", "year": 2020, "nested": [1,2,3,4,5], "other": ["abc", 123] } } }] });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Stringification Deep Copy
_.cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 88 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
Stringification Deep Copy	87164.4 Ops/sec
_.cloneDeep	73953.9 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark defines two test cases:

1. `JSON Stringification vs. cloneDeep`: This test compares the performance of creating a deep copy of an object using JavaScript's built-in `JSON.parse(JSON.stringify())` method versus using Lodash's `_cloneDeep()` function.
2. `_.cloneDeep`: This test only measures the performance of Lodash's `_cloneDeep()` function.

**Options Compared**

In both test cases, there are two options being compared:

* **Manual deep copying with JSON.parse(JSON.stringify())**: A custom implementation of creating a deep copy using JavaScript's built-in `JSON` functions.
* **Using Lodash's _cloneDeep()**: Utilizing the Lodash library to create a deep copy.

**Pros and Cons**

**Manual Deep Copying (JSON.parse(JSON.stringify()))**

Pros:

* Low overhead, as it only involves parsing JSON strings
* Can be more predictable and consistent than using libraries

Cons:

* May not handle all edge cases or complex data structures correctly
* Can be slower due to the need to parse JSON strings
* Can lead to subtle bugs if not implemented carefully (e.g., handling cyclic references)

**Using Lodash's _cloneDeep()**

Pros:

* Well-tested and widely used, making it a reliable choice for deep copying
* Handles complex data structures and edge cases correctly
* Often faster than manual implementation due to optimized code

Cons:

* Adds an external dependency on the Lodash library
* May have additional overhead compared to a simple manual implementation

**Library Overview**

Lodash's `_cloneDeep()` function creates a deep copy of an object by recursively traversing the object's properties and creating new objects for each nested property. This ensures that all references within the original object are preserved in the copied object.

**Special JS Features/Syntax**

None mentioned explicitly, but it's worth noting that JavaScript's `Object.assign()` method can be used to create a shallow copy of an object, whereas `_cloneDeep()` is designed for deep copying.

**Other Alternatives**

If you prefer not to use Lodash or want to implement your own custom deep copying solution, you can consider using other libraries like:

* Immutable.js: Provides a robust and efficient way to work with immutable data structures.
* DeepCopyJS: A lightweight library specifically designed for creating deep copies of objects.
* Recursive clone functions: Can be implemented manually using recursive function calls to traverse the object's properties.

Keep in mind that each alternative has its own trade-offs, pros, and cons.

Related benchmarks:

JSON Stringification vs. cloneDeep (version: 0)

Comparing performance of: Stringification Deep Copy vs _.cloneDeep

Created: 3 years ago by: Guest

Jump to the latest result

Stringification Deep Copy

_.cloneDeep

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