Benchmark: Object cloning with Lodash clone vs ES6 object spread vs ES6 Object.assign vs Json copy

HTML Preparation code:

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

Script Preparation code:

var o = {
 a: {
   b: 1,
   c: 2,
   d: 3,
   j: {
     k: [1,2,3],
     l: [4,5,6]
   },
 },
 e: [1,2,3,4,5,6],
 f: 1,
 g: {
   h: 1,
 }
}

var visited = Symbol('visited');
var stopProcessing = false;

function copy(object) {
    // dates
    if (object instanceof Date) {
        return new Date(object.getTime());
        // arrays
    } else if (object instanceof Array) {
        const target = [];

        for (const obj of object) {
            target.push(copy(obj));
        }

        return target;
        // objects
    } else if (object instanceof Object) {
        if (object[visited]) {
            delete object[visited];
            return object;
        }

        if (stopProcessing) {
            return object;
        }

        object[visited] = true;

        const target = {};

        for (const prop in object) {
            if (object.hasOwnProperty(prop)) {
                if (object[visited]) {
                    delete object[visited];
                    stopProcessing = true;
                }

                target[prop] = copy(object[prop]);
            }
        }

        stopProcessing = false;
        return target;
    } else {
        // it's a primitive
        return object;
    }
}

Tests:

Lodash clone
const a = _.clone(o)
ES6 spread
const a = { ...o }
ES6 Object.assign
const a = Object.assign({}, o)
Json
const a = JSON.parse(JSON.stringify(o))
copy
const a = copy(o);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash clone
ES6 spread
ES6 Object.assign
Json
copy

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition:**

The benchmark compares four methods for object cloning:

1. Using Lodash (`_.clone(o)`): A library function that creates a deep copy of an object.
2. ES6 spread operator (`{ ...o }`): An expression that creates a new object with the same properties as `o`.
3. ES6 `Object.assign()` method (`Object.assign({}, o)`): A method that copies all enumerable own properties from `o` to a new object.
4. JSON copy (`JSON.parse(JSON.stringify(o))`): A function that creates a deep copy of an object using JSON serialization and deserialization.

**Options Compared:**

The benchmark is comparing the performance of these four methods for cloning objects with varying structures (a nested object, an array, and primitive values).

**Pros and Cons:**

1. **Lodash clone (`_.clone(o)`)**:
	* Pros: Easy to use, provides a deep copy of the entire object.
	* Cons: Requires Lodash library, may be slower due to library overhead.
2. **ES6 spread operator (`{ ...o }`)**:
	* Pros: Simple and concise, creates a shallow copy by default (may not work for nested objects).
	* Cons: May not work as expected with complex object structures or arrays.
3. **ES6 `Object.assign()` method (`Object.assign({}, o)`)**:
	* Pros: Standardized method, can be used with both simple and complex objects.
	* Cons: May not create a deep copy of all nested properties.
4. **JSON copy (`JSON.parse(JSON.stringify(o))`)**:
	* Pros: Can handle complex object structures and arrays, creates a deep copy.
	* Cons: Slower due to JSON serialization and deserialization overhead.

**Special Considerations:**

1. **Symbol iteration**: The benchmark uses a `visited` symbol to avoid infinite loops when iterating over objects with circular references.
2. **Primitive values**: The benchmark includes primitive values (e.g., numbers, strings) in the object structure to ensure that each method handles these cases correctly.

**Alternative Methods:**

Other methods for cloning objects include:

1. **`.slice()` and `.concat()` for arrays**
2. **`.forEach()` with `Object.assign()` or `JSON.parse(JSON.stringify())` for nested objects**
3. **Manual iteration using `Object.keys()`, `Object.values()`, and `Array.prototype.forEach()`**

Keep in mind that the performance differences between these methods may vary depending on the specific use case and JavaScript engine being used.

Latest run results:

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

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

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
Lodash clone	1595850.1 Ops/sec
ES6 spread	11437084.0 Ops/sec
ES6 Object.assign	3367141.8 Ops/sec
Json	439116.3 Ops/sec
copy	160056.5 Ops/sec

Related benchmarks:

Object cloning with Lodash clone vs ES6 object spread vs ES6 Object.assign vs Json copy (version: 0)

Comparing performance of: Lodash clone vs ES6 spread vs ES6 Object.assign vs Json vs copy

Created: 2 years ago by: Guest

Jump to the latest result

Lodash clone

ES6 spread

ES6 Object.assign

Json

copy

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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