Benchmark: JAVASCRIPTOBJECT DEEP COPY

JAVASCRIPTOBJECT DEEP COPY (version: 0)

compare array copy/clone methods

Comparing performance of: Lodash cloneDeep vs Native map deep slice(turns objects into arrays) vs Native JSON parse vs Native map deep slice at 0(turns objects into arrays) vs Native map(shallow clone) vs Recursive deep clone vs Map deep clone vs Object.assign shallow clone vs structuredClone deep clone

Created: one year ago by: Guest

Jump to the latest result

HTML Preparation code:

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

Script Preparation code:

var testArray = [{
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
},{
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
}];

var testCopy = null;

var deepClone = function(obj) {
   var out;
    if (Array.isArray(obj)) {
        out = [];
        for (var index = 0; index < obj.length; ++index) {
            let subArray = obj[index];
            out.push((subArray === null) ? subArray : (subArray instanceof Date) ? new Date(subArray.valueOf()) : (typeof subArray === 'object') ? deepClone(subArray) : subArray);
        }
    } else {
        out = {};
        for (var key in obj) {
            var subObject = obj[key];
            out[key] = subObject === null ? subObject : subObject instanceof Date ? new Date(subObject.valueOf()) : (typeof subObject === 'object') ? deepClone(subObject) : subObject;
            
           
        }
    }
    return out;
};

Tests:

Lodash cloneDeep
testCopy = _.cloneDeep(testArray);
Native map deep slice(turns objects into arrays)
testCopy = testArray.map(arr => testArray.slice());
Native JSON parse
testCopy = JSON.parse(JSON.stringify(testArray));
Native map deep slice at 0(turns objects into arrays)
testCopy = testArray.map(arr => testArray.slice(0));
Native map(shallow clone)
testCopy = testArray.map(arr => arr);
Recursive deep clone
testCopy = deepClone(testArray);
Map deep clone
testCopy = testArray.map(arr => deepClone(arr));
Object.assign shallow clone
testCopy = Object.assign([...testArray]);
structuredClone deep clone
testCopy = structuredClone(testArray)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native map deep slice(turns objects into arrays)
Native JSON parse
Native map deep slice at 0(turns objects into arrays)
Native map(shallow clone)
Recursive deep clone
Map deep clone
Object.assign shallow clone
structuredClone deep clone

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches for creating deep copies in JavaScript is an essential task.

**What is being tested?**

The provided benchmark tests eight different methods for creating deep copies of arrays:

1. **Lodash's `cloneDeep`**: Uses Lodash's library to create a deep copy.
2. **Native `map` with `slice`**: Uses the `map()` method with `slice()` to convert objects into arrays.
3. **Native `JSON.parse(JSON.stringify())`**: Uses the native JSON serialization and deserialization methods to create a deep copy.
4. **Native `map` with `slice(0)`**: Similar to the previous point, but using `slice(0)` instead of just `slice`.
5. **Lodash's `cloneDeep`** (again): Another test for Lodash's library.
6. **Recursive deep clone**: A custom implementation that recursively clones each property.
7. **structuredClone**: The new web standard method for creating deep copies.

**Methods for creating deep copies**

Here's a brief overview of each method:

1. **Lodash's `cloneDeep`**: This method uses a recursive approach to create a deep copy, iterating through the object's properties and cloning each one.
2. **Native `map` with `slice`**: This method converts objects into arrays by mapping over the array elements and using `slice()` to extract only the values.
3. **Native `JSON.parse(JSON.stringify())`**: This method serializes the object to a JSON string, then deserializes it back into an object, which creates a deep copy.
4. **Native `map` with `slice(0)`**: Similar to the previous point, but using `slice(0)` instead of just `slice()`.
5. **Recursive deep clone**: This method uses recursion to iterate through the object's properties and clone each one.
6. **structuredClone**: A new web standard method that creates a deep copy by serializing the object into a binary format and then deserializing it back into an object.

**Performance results**

The performance results show that:

* Lodash's `cloneDeep` is relatively fast, with an average of around 10-20% slower than native methods.
* Native `map` with `slice` is one of the fastest methods, followed closely by `structuredClone`.
* Native `JSON.parse(JSON.stringify())` and its variations are slower due to the overhead of serializing and deserializing objects.
* Recursive deep clone is significantly slower than other methods due to its iterative nature.

Overall, the results suggest that for most use cases, native methods or Lodash's `cloneDeep` will be sufficient. However, if you need a specific feature or behavior not provided by these methods, you may need to implement a custom solution.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Linux

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	274928.3 Ops/sec
Native map deep slice(turns objects into arrays)	4429199.0 Ops/sec
Native JSON parse	316737.2 Ops/sec
Native map deep slice at 0(turns objects into arrays)	4460686.0 Ops/sec
Native map(shallow clone)	8061292.0 Ops/sec
Recursive deep clone	267947.8 Ops/sec
Map deep clone	293810.0 Ops/sec
Object.assign shallow clone	4536136.0 Ops/sec
structuredClone deep clone	185577.5 Ops/sec

Related benchmarks:

JAVASCRIPTOBJECT DEEP COPY (version: 0)

compare array copy/clone methods

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native map deep slice(turns objects into arrays)

Native JSON parse

Native map deep slice at 0(turns objects into arrays)

Native map(shallow clone)

Recursive deep clone

Map deep clone

Object.assign shallow clone

structuredClone deep clone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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