Benchmark: Lodash cloneDeep VS spread operator - 2

HTML Preparation code:

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

Script Preparation code:

var MyObject = {
    "id": null,
    "type": "shift",
    "attributes": {
        "startsAt": "2023-09-22T08:00:00.000Z",
        "endsAt": "2023-09-22T22:00:00.000Z",
        "durationInSeconds": 24480,
        "shopId": 20,
        "note": null,
        "lateness": 0,
        "delay": 0,
        "absenceCalculation": "day",
        "pauseTime": 0,
        "userId": 121,
        "nbMeal": 0,
        "color": "#999999",
        "hoursWorth": 6.8,
        "inHoursCounter": false,
        "previsionalStart": null,
        "previsionalEnd": null,
        "previsionalSaved": null,
        "previsionalPosteId": null,
        "showStartTime": true,
        "showEndTime": true,
        "showDuration": true,
        "updatedAt": "2023-09-22T13:33:27.841Z",
        "automaticPlanningId": null,
        "provenance": "duplicate_week",
        "weekNumber": 38,
        "shopName": "Odéon",
        "shopOpeningTime": "08:00",
        "shopClosingTime": "22:00",
        "benefitInKind": false,
        "dayAbsence": true,
        "startsAtForDisplay": "2023-09-22T08:00:00.000Z",
        "isOutOfShopHours": false
    },
    "relationships": {
        "poste": {
            "id": "938",
            "type": "poste",
            "attributes": {
                "id": 938,
                "color": "#999999",
                "absenceType": "unpaid",
                "absenceKey": "weekly_rest",
                "percentagePauseTime": false,
                "pauseTime": 1800,
                "planningOrder": 0,
                "name": "Repos Hebdomadaire",
                "absenceIndemnifiedByOther": false,
                "absenceIndemnifiedByEmployer": false
            }
        },
        "previsionalPoste": null,
        "shop": {
            "data": {
                "id": "20",
                "type": "shop"
            }
        },
        "user": {
            "data": {
                "id": "121",
                "type": "user"
            }
        }
    }
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Spread operator
myCopy = {...MyObject};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Spread operator

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 JavaScript performance is crucial in today's web development world, and MeasureThat.net provides an excellent platform for this purpose.

**What is being tested?**

The provided benchmark tests the performance of two approaches:

1. **Lodash cloneDeep**: The `_.cloneDeep` function from the Lodash library is used to create a deep copy of the `MyObject`. A deep copy creates a new object with the same properties as the original, but with different references for each property.
2. **Spread operator**: The spread operator (`...`) is used to create a shallow copy of the `MyObject` by spreading its properties into an array.

**Options comparison**

The two approaches have different characteristics:

* **Lodash cloneDeep**:
	+ Pros: Creates a deep copy, which can be useful in certain scenarios where you need to preserve the entire object structure.
	+ Cons: Requires the Lodash library, adds overhead due to the function call and object creation.
* **Spread operator**:
	+ Pros: Lightweight, fast, and efficient, as it only creates a shallow copy of the properties.
	+ Cons: May not be suitable for deep object structures or when you need to preserve nested objects.

**Other considerations**

When deciding between these two approaches, consider the following:

* Do you need to preserve the entire object structure? If yes, `_.cloneDeep` might be a better choice.
* Are you working with shallow data structures? The spread operator might be sufficient and more efficient.
* Is the performance difference critical in your use case? If so, MeasureThat.net can help you determine which approach is faster.

**Lodash library**

The Lodash library is a popular JavaScript utility library that provides a wide range of functions for tasks such as array manipulation, object creation, and functional programming. The `_.cloneDeep` function is part of this library and creates a deep copy of an object by recursively cloning its properties.

**JavaScript features and syntax**

There are no specific JavaScript features or syntax mentioned in the benchmark definition that would require special attention or explanation. However, it's worth noting that MeasureThat.net supports modern JavaScript features like ES6+ syntax, async/await, and more.

**Alternatives**

Other alternatives for creating copies of objects in JavaScript include:

* **Array.prototype.slice()**: Creates a shallow copy of an array by returning a new array with references to the original elements.
* **Object.assign()**: Copies properties from one object to another, but only creates a shallow copy.
* **JSON.parse(JSON.stringify(obj))**: Creates a deep copy of an object by recursively cloning its properties.

Keep in mind that these alternatives might not offer the same level of functionality or performance as `_.cloneDeep` and the spread operator.

Related benchmarks:

Lodash cloneDeep VS spread operator - 2 (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

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):