Run results for: compare _.merge() and lodash-merge

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0

Browser: Firefox 103

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
_.merge()	109824.4 Ops/sec
lodash-merge	1594320.1 Ops/sec

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

Run results for: compare _.merge() and lodash-merge

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

_.merge()

lodash-merge