Benchmark: Lodash cloneDeep vs NgRx deep freeze

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 = {
    "first": {
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "ppu": 0.55,
        "batters": {
            "batter": [{
                    "id": "1001",
                    "type": "Regular"
                },
                {
                    "id": "1002",
                    "type": "Chocolate"
                },
                {
                    "id": "1003",
                    "type": "Blueberry"
                },
                {
                    "id": "1004",
                    "type": "Devil's Food"
                }
            ]
        },
        "topping": [{
                "id": "5001",
                "type": "None"
            },
            {
                "id": "5002",
                "type": "Glazed"
            },
            {
                "id": "5005",
                "type": "Sugar"
            },
            {
                "id": "5007",
                "type": "Powdered Sugar"
            },
            {
                "id": "5006",
                "type": "Chocolate with Sprinkles"
            },
            {
                "id": "5003",
                "type": "Chocolate"
            },
            {
                "id": "5004",
                "type": "Maple"
            }
        ]
    },
    "second": {
        "id": "0002",
        "type": "donut",
        "name": "Raised",
        "ppu": 0.55,
        "batters": {
            "batter": [{
                "id": "1001",
                "type": "Regular"
            }]
        },
        "topping": [{
                "id": "5001",
                "type": "None"
            },
            {
                "id": "5002",
                "type": "Glazed"
            },
            {
                "id": "5005",
                "type": "Sugar"
            },
            {
                "id": "5003",
                "type": "Chocolate"
            },
            {
                "id": "5004",
                "type": "Maple"
            }
        ]
    },
    "third": {
        "id": "0003",
        "type": "donut",
        "name": "Old Fashioned",
        "ppu": 0.55,
        "batters": {
            "batter": [{
                    "id": "1001",
                    "type": "Regular"
                },
                {
                    "id": "1002",
                    "type": "Chocolate"
                }
            ]
        },
        "topping": [{
                "id": "5001",
                "type": "None"
            },
            {
                "id": "5002",
                "type": "Glazed"
            },
            {
                "id": "5003",
                "type": "Chocolate"
            },
            {
                "id": "5004",
                "type": "Maple"
            }
        ]
    }
}

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(myObject);
deep-freeze
function isObjectLike(target) { return typeof target === 'object' && target !== null; } function isFunction(target) { return typeof target === 'function'; } function hasOwnProperty(target, propertyName) { return Object.prototype.hasOwnProperty.call(target, propertyName); } function freeze(target) { Object.freeze(target); const targetIsFunction = isFunction(target); Object.getOwnPropertyNames(target).forEach((prop) => { // Ignore Ivy properties, ref: https://github.com/ngrx/platform/issues/2109#issuecomment-582689060 if (prop.startsWith('ɵ')) { return; } if ( hasOwnProperty(target, prop) && (targetIsFunction ? prop !== 'caller' && prop !== 'callee' && prop !== 'arguments' : true) ) { const propValue = target[prop]; if ( (isObjectLike(propValue) || isFunction(propValue)) && !Object.isFrozen(propValue) ) { freeze(propValue); } } }); return target; } myCopy = freeze(myObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
deep-freeze

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.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark compares two approaches for deep copying complex objects: Lodash's `cloneDeep` and NgRx's `deepFreeze`. The test object, `myObject`, contains multiple levels of nested properties, making it an ideal candidate for testing deep copying.

**Lodash cloneDeep**

Lodash's `cloneDeep` method is a popular choice for deep copying objects. It recursively creates new objects and copies all properties from the original object to the new one.

Pros:

* Easy to use: The API is simple and straightforward.
* Well-maintained: Lodash is an established library with a large community of contributors.

Cons:

* Performance overhead: `cloneDeep` can be slower than other approaches due to its recursive nature.
* Memory usage: Creating multiple copies of the same object can lead to memory leaks if not used carefully.

**NgRx deepFreeze**

NgRx's `deepFreeze` method is a more specialized approach for creating immutable objects. It uses a combination of `Object.freeze()` and a custom implementation to recursively freeze properties.

Pros:

* Performance: `deepFreeze` can be faster than `cloneDeep`, especially for large objects, since it avoids the overhead of creating multiple copies.
* Memory efficiency: By freezing individual properties instead of recreating the entire object, `deepFreeze` reduces memory usage.

Cons:

* Steeper learning curve: The custom implementation and understanding of NgRx's architecture are necessary to use `deepFreeze`.
* Compatibility issues: `deepFreeze` might not work as expected in certain environments or libraries that interfere with NgRx's functionality.

**Individual Test Cases**

The provided benchmark includes two individual test cases:

1. **Lodash cloneDeep**: Creates a new object using Lodash's `cloneDeep` method.
2. **NgRx deepFreeze**: Uses NgRx's custom implementation to freeze the test object using `deepFreeze`.

These tests can be run separately or together to compare the performance of both approaches.

**Benchmark Results**

The latest benchmark result shows that:

* NgRx's `deepFreeze` has a higher number of executions per second (878133.4375) compared to Lodash's `cloneDeep` (58237.92578125).
* However, the exact results may vary depending on the specific environment, hardware, and browser used.

Keep in mind that these results are specific to this particular benchmark and might not generalize to other use cases or environments.

In conclusion, both approaches have their strengths and weaknesses. Lodash's `cloneDeep` is easy to use but might incur performance overhead, while NgRx's `deepFreeze` offers better performance but requires a deeper understanding of its custom implementation. The choice ultimately depends on the specific requirements and constraints of your project.

Related benchmarks:

Lodash cloneDeep vs NgRx deep freeze (version: 0)

Comparing performance of: Lodash cloneDeep vs deep-freeze

Created: 3 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

deep-freeze

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