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: 2 years 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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

Related benchmarks: