Benchmark: Compare clone object

HTML Preparation code:

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

Script Preparation code:

var posts = {};
for (var i = 0; i < 10000; i++) {
    posts[i] = {
        id: i,
        content: "test posts " + i,
        commentsCount: 1,
        comments: {
            meta: {
                total: 1,
            },
            list: [{
                content: "just a comment"
            }]
        }
    }
}

Tests:

Spread
var newPosts = {...posts};
Lodash clone
var newPosts = _.clone(posts);
Lodash cloneDeep
var newPosts = _.cloneDeep(posts);
Object assign
var newPosts = Object.assign({}, posts)
Json Clone
var newPosts = JSON.parse(JSON.stringify(posts))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Lodash clone
Lodash cloneDeep
Object assign
Json Clone

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; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
Spread	1711.4 Ops/sec
Lodash clone	4976.2 Ops/sec
Lodash cloneDeep	41.4 Ops/sec
Object assign	3054.8 Ops/sec
Json Clone	178.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark compares four different approaches to create a copy of an object:

1. Spread operator (`var newPosts = {...posts};`)
2. Lodash `clone` function (`var newPosts = _.clone(posts);`)
3. Lodash `cloneDeep` function (`var newPosts = _.cloneDeep(posts);`)
4. `Object.assign()` method (`var newPosts = Object.assign({}, posts);`)
5. JSON stringification and parsing (`var newPosts = JSON.parse(JSON.stringify(posts))`)

**Options Compared**

Each option is compared in terms of execution time, which is measured in "ExecutionsPerSecond".

* **Spread operator**: Creates a shallow copy of the object by iterating over its properties and creating a new object with the same keys and values.
* **Lodash `clone` function**: A utility function that creates a deep copy of an object, recursively copying all nested objects and arrays.
* **Lodash `cloneDeep` function**: Another utility function from Lodash that creates an even deeper copy of an object, including all nested objects, arrays, and functions.
* **`Object.assign()` method**: A built-in JavaScript method that creates a new object by copying all enumerable own properties from one or more source objects.
* **JSON stringification and parsing**: Uses the `JSON.stringify()` function to convert the original object into a JSON string and then parses it back into an object using `JSON.parse()`. This approach can create a deep copy of an object, but may incur additional overhead due to the parsing step.

**Pros and Cons**

Here's a brief summary of each option:

* **Spread operator**: Pros: Lightweight, easy to use. Cons: Creates only a shallow copy, which may not be suitable for all use cases.
* **Lodash `clone` function**: Pros: Creates a deep copy, handles complex data structures like arrays and objects with functions. Cons: Requires an additional library (Lodash).
* **Lodash `cloneDeep` function**: Pros: Handles even deeper copies of objects, includes functions and other complexities. Cons: Requires an additional library (Lodash), may be slower due to the recursive copying process.
* **`Object.assign()` method**: Pros: Built-in JavaScript method, easy to use. Cons: Creates only a shallow copy by default, requires creating an empty object as the target.
* **JSON stringification and parsing**: Pros: Can create deep copies of objects, but may incur additional overhead due to the parsing step. Cons: Requires two separate functions (stringify and parse), can be slower.

**Library Usage**

The benchmark uses Lodash, a popular JavaScript utility library, for its `clone` and `cloneDeep` functions. These functions provide efficient and convenient ways to work with complex data structures in JavaScript.

**Special JS Feature/Syntax**

None of the provided benchmarks require special JavaScript features or syntax beyond basic object creation and iteration.

**Other Alternatives**

If you're interested in exploring other options for creating copies of objects, here are a few alternatives:

* **`JSON.parse(JSON.stringify(obj))`**: This method is similar to the Lodash `cloneDeep` function but uses JSON stringification instead.
* **`Object.create(null)` + Object.assign()**: This approach creates an empty object using `Object.create(null)`, and then copies properties from the original object using `Object.assign()`.

Related benchmarks:

Compare clone object (version: 0)

Compare clone object

Comparing performance of: Spread vs Lodash clone vs Lodash cloneDeep vs Object assign vs Json Clone

Created: 3 years ago by: Guest

Jump to the latest result

Spread

Lodash clone

Lodash cloneDeep

Object assign

Json Clone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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