Benchmark: lodash merge vs deepmerge vs simple clone function (multiple style objects)

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script src='https://unpkg.com/deepmerge@4.3.1/dist/umd.js'></script>

Script Preparation code:

const objects = [
  {},
  {
    color: "rgb(25, 67, 50)",
    width: "134.391px",
    height: "36px",
    fontSize: "34px",
    fontStyle: "normal",
    textAlign: "center",
    fontFamily: "Avenir",
    fontWeight: "bold",
    lineHeight: "36px",
    letterSpacing: "0em",
    textDecoration: "none",
    textAlignLast: "center",
    flexShrink: 0,
    flexBasis: "auto",
    overflowY: "hidden",
    transition: "inherit",
    "&:hover": {
      color: "#ccc",
      width: "130px",
      height: "50px",
    },
    "@media (max-width: 640px)": {
      textAlignLast: "center",
      flexShrink: 0,
      flexBasis: "auto",
      overflowY: "hidden",
      transition: "inherit",
      "&:hover": {
        color: "#ddd",
        width: "160px",
        height: "60px",
        flexShrink: 1,
      },
    },
    "@media (min-width: 641px) and (max-width: 820px)": {
      textAlignLast: "center",
      flexShrink: 0,
      flexBasis: "auto",
      overflowY: "hidden",
      transition: "inherit",
    },
  },
  {
    overflowWrap: "break-word",
    "&:hover": {
      color: "#fff",
    },
    "@media (max-width: 640px)": {
      color: "green",
      flexShrink: 1,
      "&:hover": {
        color: "#cecece",
        flexShrink: 0,
        gap: "5px",
      },
    },
    "@media (min-width: 641px) and (max-width: 820px)": {
      fontStyle: "italic",
      textAlignLast: "both",
    },
  },
];

window.OBJECTS = objects;
window.simpleDeepClone = simpleDeepClone;

function simpleDeepClone(...objects) {
  return objects.reduce((acc, obj) => {
    for (const key in obj) {
      const value = obj[key];
      if (typeof value === "object" && value !== null) {
        acc[key] = simpleDeepClone(acc[key] || {}, value);
      } else {
        acc[key] = value;
      }
    }
    return acc;
  }, {});
}

Tests:

lodash merge
_.merge({}, ...OBJECTS);
deepmerge.all
deepmerge.all([{}, ...OBJECTS]);
simpleDeepClone
simpleDeepClone(...OBJECTS);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash merge
deepmerge.all
simpleDeepClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash merge	213562.2 Ops/sec
deepmerge.all	133258.6 Ops/sec
simpleDeepClone	519877.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark that tests three different approaches for merging or cloning objects: Lodash's `merge` function, DeepMerge's `all` function, and a custom clone function named `simpleDeepClone`.

**What is being tested?**

Each test case measures the performance of one of these approaches when merging or cloning multiple style objects. The test objects contain various properties, including nested objects, arrays, and strings.

**Options compared:**

1. **Lodash's `merge` function**: This function merges two or more objects into a single object.
2. **DeepMerge's `all` function**: This function takes an array of objects as input and merges them into a single object.
3. **Simple clone function (`simpleDeepClone`)**: This custom function clones an object by recursively copying its properties.

**Pros and Cons of each approach:**

1. **Lodash's `merge` function**:
	* Pros: Simple to use, efficient in most cases, and well-maintained.
	* Cons: May not handle certain edge cases or complex data structures efficiently.
2. **DeepMerge's `all` function**:
	* Pros: Optimized for merging multiple objects, handles complex data structures well, and has a strong focus on performance.
	* Cons: Can be overwhelming to use for simple merge tasks, and its API is not as straightforward as Lodash's.
3. **Simple clone function (`simpleDeepClone`)**:
	* Pros: Easy to understand and implement, can handle any type of object, and is highly customizable.
	* Cons: May be slower than the other two approaches for large datasets, and requires more manual effort.

**Library usage**

1. Lodash's `merge` function uses the [Lodash library](https://lodash.com/), which provides a wide range of utility functions for JavaScript developers.
2. DeepMerge's `all` function uses the [DeepMerge library](https://unpkg.com/deepmerge@4.3.1/dist/umd.js), which is specifically designed for merging objects.

**Special JavaScript features or syntax**

None mentioned in this benchmark. However, it's worth noting that some of these libraries may use advanced JavaScript features like async/await, promises, or ES6+ syntax under the hood.

**Other alternatives**

For cloning objects, other alternatives to `simpleDeepClone` include:

1. **JSON.parse(JSON.stringify(obj))**: This method serializes and deserializes an object, which can be an effective way to clone it.
2. **Object.assign()**: This method copies properties from one or more source objects to a target object.

For merging objects, other alternatives to Lodash's `merge` function include:

1. **ES6+ Object spread syntax (`{ ...obj }`)**: This syntax allows you to create a new object with the same properties as an existing object.
2. **Object.assign()**: Similar to above, but can be used to merge multiple objects into one.

Note that these alternatives may have different performance characteristics or trade-offs in terms of complexity and readability.

Related benchmarks:

lodash merge vs deepmerge vs simple clone function (multiple style objects) (version: 0)

Comparing performance of: lodash merge vs deepmerge.all vs simpleDeepClone

Created: one year ago by: Registered User

Jump to the latest result

lodash merge

deepmerge.all

simpleDeepClone

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