Run results for: merge test - lodash vs native v2

Run details:

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

Browser: Chrome 123

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Native	347526.2 Ops/sec
Lodash.js filter	493693.2 Ops/sec

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

<p id="id1"></p>
<p id="id2"></p>

Script Preparation code:

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min);
}

const getRandChar = () => getRandomInt(48, 127);

const isObject = (item) => (item && typeof item === 'object' && !Array.isArray(item));

function mergeDeep(target, source) {
  let output = Object.assign({}, target);

  if (isObject(target) && isObject(source)) {
    Object.keys(source).forEach((key) => {
      if (isObject(source[key])) {
        if (!(key in target)) {
          Object.assign(output, { [key]: source[key] });
        }
        else {
          output[key] = mergeDeep(target[key], source[key]);
        }
      } else {
        Object.assign(output, { [key]: source[key] });
      }
    });
  }

  return output;
}

const max1 = 100000; // 100,000 (100 Thousand)
const max2 = 10000000; // 10,000,000 (10 Million)
const max3 = 100000000; // 100,000,000 (100 Million)

var obj1 = {};
var obj2 = {};

for (let i1 = 0; i1 < 13; i1++) {
  const key1 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));

  for (let i2 = 0; i2 < 23; i2++) {
    const key2 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));

    for (let i3 = 0; i3 < 42; i3++) {
      const key3 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));

      for (let i4 = 0; i4 < 69; i4++) {
        const key4 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));

        for (let i5 = 0; i5 < 13; i5++) {
          const value1 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));
          const value2 = String.fromCharCode(...(new Array(15).map(v => getRandChar())));
          Object.assign(
            obj1,
            { [key1]: { [key2]: { [key3]: { [key4]: { aValue: value1 } } } } },
          );
          Object.assign(
            obj2,
            { [key1]: { [key2]: { [key3]: { [key4]: { aValue: value2 } } } } },
          );
        }
      }
    }
  }
}

Tests:

Native
document.getElementById('id1').textContent = `Result is 1: ${JSON.stringify(mergeDeep(obj1, obj2))}`;
Lodash.js filter
document.getElementById('id2').textContent = `Result is 2: ${JSON.stringify(_.merge(obj1, obj2))}`;

Run results for: merge test - lodash vs native v2

Native

Lodash.js filter