Run results for: mergeByKey ES6 map + find vs Lodash vs ES6 Map

Run details:

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

Browser: Chrome 103

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
ES6 map + find	2.2 Ops/sec
Lodash	62.4 Ops/sec
ES6 Map	160.1 Ops/sec

HTML Preparation code:

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

Script Preparation code:

var arr1 = [];
var arr2 = [];

for (i = 0; i < 10000; i++) {
  var obj = {
     id: Math.random().toString(36).substr(2, 5),
     name: Math.random().toString(36).substr(2, 5)
  };
  arr1.push(obj);
}

for (i = 0; i < arr1.length; i++) {
  var obj = {
     id: Math.random() < 0.5 ? arr1[i].id : Math.random().toString(36).substr(2, 5),
     name: Math.random().toString(36).substr(2, 5),
     role: ['ADMIN', 'DEV', 'MANAGER', 'HR', 'DEV_OPS'][Math.floor(Math.random() * 5)]
  };
  arr2.push(obj);
}

Tests:

ES6 map + find
const mergeByKey = (firstArr, secondArr, key) => { return firstArr.map(initialObject => { const dataToExtend = secondArr.find(dataToExtend => initialObject[key] === dataToExtend[key]); if (dataToExtend) { return { ...initialObject, ...dataToExtend }; } return initialObject; }); }; var result = mergeByKey(arr1, arr2, 'id');
Lodash
const mergeByKey = (firstArr, secondArr, key) => { return _(firstArr) .keyBy(key) .merge(_.keyBy(secondArr, key)) .values() .value() }; var result = mergeByKey(arr1, arr2, 'id');
ES6 Map
const mergeByKey = (firstArr, secondArr, key) => { return [ ...firstArr .concat(secondArr) .reduce((m, o) => m.set( o[key], Object.assign(m.get(o[key]) || {}, o)), new Map()) .values() ] }; var result = mergeByKey(arr1, arr2, 'id');