Benchmark: compare _.merge() and lodash-merge

HTML Preparation code:

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

Script Preparation code:

function mergeBase(a, b) {
    const typeA = Object.prototype.toString.call(a);
    const typeB = Object.prototype.toString.call(b);
    if (typeA === typeB) {
        switch (typeA) {
            case "[object Object]":
                return Object.keys(b).forEach(
                    (key) => (a[key] = mergeBase(a[key], b[key]))
                );
            case "[object Array]":
                return b.forEach((item, idx) => (a[idx] = mergeBase(a[idx], item)));
            default:
                return b;
        }
    }
    switch (typeB) {
        case "[object Object]":
        case "[object Array]":
            return b;
        default:
            return b ?? a;
    }
}

function merge(base, ...sources) {
    sources.forEach((source) => {
        base = mergeBase(base, source);
    });
    return base;
}

var colorsDest = {
  "colors": [
    {
      "color": "black",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,255,255,1],
        "hex": "#000"
      }
    },
    {
      "color": "white",
      "category": "value",
      "code": {
        "rgba": [0,0,0,1],
        "hex": "#FFF"
      }
    },
    {
      "color": "red",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,0,0,1],
        "hex": "#FF0"
      }
    },
    {
      "color": "blue",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [0,0,255,1],
        "hex": "#00F"
      }
    },    
  ]
}


var colorsSrc = {
  "colors": [
    {
      "color": "black",
      "category": "hue",
      "type": "primary",
      "code": {
      }
    },
    {
      "color": "white",
      "category": "value",
    },
    {
      "color": "red",
      "type": "primary",
      "code": {
        "rgba": [255,0,0,1],
        "hex": "#FF0"
      }
    },
    {
      "color": "blue",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [0,0,255,1],
        "hex": "#00F"
      }
    },
    {
      "color": "yellow",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,255,0,1],
        "hex": "#FF0"
      }
    },
    {
      "color": "green",
      "category": "hue",
      "type": "secondary",
      "code": {
        "rgba": [0,255,0,1],
        "hex": "#0F0"
      }
    },
  ]
}

Tests:

_.merge()
var result = _.merge(colorsDest, colorsSrc);
lodash-merge
var result = merge(colorsDest, colorsSrc);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.merge()
lodash-merge

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
_.merge()	81873.7 Ops/sec
lodash-merge	503385.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll do my best to explain the benchmark in detail.

**Overview**

The benchmark compares the performance of two JavaScript functions: `_.merge()` from Lodash and a custom implementation called `mergeBase`. The test cases use two input objects, `colorsDest` and `colorsSrc`, which contain arrays with nested objects. The goal is to merge these two objects into a single object.

**Options Compared**

The benchmark compares the following options:

1. **Lodash _.merge()**: This function takes multiple sources (in this case, `colorsDest` and `colorsSrc`) and merges them into a single object.
2. **Custom implementation: mergeBase**: This function is written by the user to replace Lodash's _.merge(). It uses a recursive approach to handle nested objects.

**Pros and Cons of Each Approach**

1. **Lodash _.merge()**:
	* Pros:
		+ Well-maintained and widely used library
		+ Handles complex data structures with ease
		+ Fast and efficient implementation
	* Cons:
		+ Additional dependency on Lodash (1.4KB gzipped)
		+ May not be as performant as a custom implementation for very large datasets
2. **Custom implementation: mergeBase**:
	* Pros:
		+ No additional dependencies or overhead
		+ Can be optimized for specific use cases or dataset sizes
	* Cons:
		+ Requires more manual effort and testing to ensure correctness
		+ May not handle complex data structures as efficiently as Lodash

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions, including _.merge(). In this case, the benchmark uses Lodash's _.merge() function to compare its performance with the custom implementation. Lodash is widely used and maintained, making it a reliable choice for many applications.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark that would require specific knowledge of JavaScript to understand.

**Other Alternatives**

If you're looking for alternative libraries or implementations, some options include:

1. **lodash-es**: A ES6-friendly version of Lodash that provides the same functionality as _.merge().
2. **Object.assign()**: The built-in `Object.assign()` method can be used to merge objects in modern browsers and Node.js environments.
3. **Custom implementation with Object.create()**: You can create a custom implementation using `Object.create()` to merge objects, but this approach may not be as efficient or scalable as the other options.

Keep in mind that these alternatives may have different performance characteristics, dependencies, or use cases compared to Lodash and the custom implementation.

Related benchmarks:

compare _.merge() and lodash-merge (version: 3)

I wrote a function to replace _.merge(). I am comparing the performance. https://github.com/thodges314/lodash-merge

Comparing performance of: _.merge() vs lodash-merge

Created: 4 years ago by: Registered User

Jump to the latest result

_.merge()

lodash-merge

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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