Run results for: mergeByKey ES6 vs Lodash vs reduce

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36

Browser: Chrome 94

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
ES6 map + find	1.8 Ops/sec
Lodash	50.6 Ops/sec
Reduce	1180200320.0 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');
Reduce
const mergeByKey3 = (firstArr, secondArr, key) => { return [...firstArr.concat(secondArr).reduce((m, o) => m.set(o[key], Object.assign(m.get(o[key]) || {}, o)) , new Map()).values()] };

Run results for: mergeByKey ES6 vs Lodash vs reduce

ES6 map + find

Lodash

Reduce