Benchmark: JavaScript spread operator vs cloneDeep

Script Preparation code:


function cloneDeep(obj) {
    if (typeof obj !== 'object' || obj === null) return obj;
    let cloned, i;
    if (obj instanceof Date) {
        cloned = new Date(obj.getTime());
        return cloned;
    }
    if (obj instanceof Array) {
        let l;
        cloned = [];
        for (i = 0, l = obj.length; i < l; i++) cloned[i] = cloneDeep(obj[i]);
        return cloned;
    }
    cloned = {};
    for (i in obj) if (obj.hasOwnProperty(i)) cloned[i] = cloneDeep(obj[i]);
    return cloned;
}

Tests:

Using the spread operator
const car = {type:"Fiat", model:"500", color:"white"}; let carCopy = { ...car, type:"Ford" };
Using cloneDeep
const car = {type:"Fiat", model:"500", color:"white"}; let carCopy = cloneDeep(car) carCopy.type = "Ford"

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using cloneDeep

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.

The provided JSON represents two benchmark test cases for JavaScript microbenchmarks on MeasureThat.net. Let's break down what each part of the JSON represents and explain the test cases.

**Benchmark Definition**

The benchmark definition is represented by the top-level object containing information about the benchmark, such as its name, description, script preparation code, and HTML preparation code (which is empty in this case).

**Script Preparation Code**

The script preparation code defines a custom JavaScript function called `cloneDeep` that creates a deep copy of an object. This function handles various cases, including:

* Dates: it creates a new Date instance with the same timestamp.
* Arrays: it recursively clones each element in the array.
* Objects: it recursively clones each property in the object.

This suggests that the benchmark is testing the performance of two ways to create copies of objects in JavaScript: using the spread operator (`...`) and a custom `cloneDeep` function.

**Test Cases**

The test cases are represented by an array of individual objects, each containing information about a specific test case:

* The first test case uses the spread operator (`...`) to create a copy of an object.
```javascript
const car = {type:"Fiat", model:"500", color:"white"};
let carCopy = {...car, type:"Ford"};
```
This creates a shallow copy of the `car` object, only updating the `type` property.

* The second test case uses the custom `cloneDeep` function to create a deep copy of an object.
```javascript
const car = {type:"Fiat", model:"500", color:"white"};
let carCopy = cloneDeep(car);
carCopy.type = "Ford";
```
This creates a deep copy of the `car` object, including all its nested properties.

**Benchmark Results**

The latest benchmark results are represented by an array of objects, each containing information about a specific test case:

* The first result is for the test case using the spread operator.
```javascript
{
  "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36",
  "Browser": "Chrome 102",
  "DevicePlatform": "Desktop",
  "OperatingSystem": "Windows",
  "ExecutionsPerSecond": 54393304.0,
  "TestName": "Using the spread operator"
}
```
This result shows that the test case using the spread operator executed approximately 54 million times per second.

* The second result is for the test case using the custom `cloneDeep` function.
```javascript
{
  "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36",
  "Browser": "Chrome 102",
  "DevicePlatform": "Desktop",
  "OperatingSystem": "Windows",
  "ExecutionsPerSecond": 1477223.375,
  "TestName": "Using cloneDeep"
}
```
This result shows that the test case using the custom `cloneDeep` function executed approximately 1.5 million times per second.

**Alternatives**

Other alternatives for creating copies of objects in JavaScript include:

* The built-in `Object.assign()` method, which creates a shallow copy of an object.
* The `JSON.parse(JSON.stringify(obj))` trick, which creates a deep copy of an object by serializing it to JSON and then parsing it back.

However, these methods may not be as efficient or accurate as the custom `cloneDeep` function in certain cases.

Related benchmarks:

JavaScript spread operator vs cloneDeep (version: 0)

Comparing performance of: Using the spread operator vs Using cloneDeep

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using cloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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