Benchmark: Clone deep Javascript Object

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

Script Preparation code:

window.foo = [
            {
                "seizoGyoshaCd": "52082",
                "seizoGyoshaKanji": "日鉄建材株式会社",
                "deleteFlg": "0",
                "torokDate": 1589986800000,
                "lastUpdShainId": null,
                "lastUpdDate": null
            },
            {
                "seizoGyoshaCd": "88888",
                "seizoGyoshaKanji": "東京製鐵株式会社",
                "deleteFlg": "0",
                "torokDate": 1589986800000,
                "lastUpdShainId": null,
                "lastUpdDate": null
            },
            {
                "seizoGyoshaCd": "NIKEN",
                "seizoGyoshaKanji": "株式会社ﾆｯｹﾝ鋼業",
                "deleteFlg": "0",
                "torokDate": 1589986800000,
                "lastUpdShainId": null,
                "lastUpdDate": null
            }
        ]

Tests:

Stringfy - Parse
JSON.parse(JSON.stringify(window.foo))
Clone deep
_.cloneDeep(window.foo)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Stringfy - Parse
Clone deep

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Stringfy - Parse	513495.8 Ops/sec
Clone deep	831631.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark test case and explain what is being tested.

**Benchmark Test Case**

The test case measures the performance difference between two approaches:

1. **JSON.parse(JSON.stringify(window.foo))**: This approach uses the `Stringify` function from the browser's JavaScript engine to convert the `window.foo` array into a string, and then parses it back into an object using `JSON.parse`.
2. **_.cloneDeep(window.foo)**: This approach uses the `cloneDeep` function from the Lodash library, which is imported via the provided HTML script tag.

**Pros and Cons of Each Approach**

1. **JSON.parse(JSON.stringify(window.foo))**:
	* Pros:
		+ Uses built-in JavaScript engine functions, which are typically optimized for performance.
		+ Does not require any external libraries or imports.
	* Cons:
		+ May incur additional overhead due to the `Stringify` and `JSON.parse` operations, which can be slower than direct array manipulation.
		+ Can result in unnecessary string creation and parsing if the original data is modified.
2. **_.cloneDeep(window.foo)**:
	* Pros:
		+ Provides a more efficient and accurate way to create a deep copy of the array, as it uses a specialized implementation for cloning complex objects.
		+ Reduces the risk of modifying the original data accidentally.
	* Cons:
		+ Requires an external library (Lodash), which may introduce additional overhead or dependencies.
		+ May not be supported in older browsers or environments.

**Library: Lodash**

The `cloneDeep` function is part of the Lodash library, which provides a suite of utility functions for JavaScript. In this case, the library is used to create a deep copy of the `window.foo` array.

**Special JS Features/Syntax (None)**

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Other Considerations**

When choosing between these approaches, consider the specific requirements and constraints of your project. If you need a more efficient and accurate way to create deep copies of complex data structures, using an external library like Lodash may be the better choice. However, if you're working with simpler data structures or prioritize built-in JavaScript engine performance, the `JSON.parse(JSON.stringify(window.foo))` approach might be sufficient.

As for alternatives, here are a few options:

1. **Using native JavaScript methods**: You can use techniques like `Array.prototype.map()` and `Array.prototype.reduce()` to create a deep copy of an array, although this may not be as efficient or accurate as using Lodash.
2. **Using the `Array.from()` method**: This method creates a new array from an iterable source, which can be used to create a shallow copy of an array. However, it may not work correctly for deep copies of complex objects.
3. **Implementing your own cloning function**: If you're comfortable with low-level JavaScript manipulation, you can implement your own cloning function using techniques like `Array.prototype.slice()` and `Object.assign()`.

Related benchmarks:

Clone deep Javascript Object (version: 0)

Test performance between Lodash.cloneDeepp vs Stringfy - Parse with JSON

Comparing performance of: Stringfy - Parse vs Clone deep

Created: one year ago by: Registered User

Jump to the latest result

Stringfy - Parse

Clone deep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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