Benchmark: mergeByKey ES6 vs Lodash vs reduce

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()] };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 map + find
Lodash
Reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ES6 map + find	4.3 Ops/sec
Lodash	141.4 Ops/sec
Reduce	180019136.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to merge two arrays based on a common key: `mergeByKey`, `Lodash`, and `Reduce`. The input data is an array of objects with random `id` and `name` properties, and each object may have a randomly assigned role from a predefined list.

**Script Preparation Code**

The script preparation code creates two large arrays, `arr1` and `arr2`, with 10,000 elements each. Each element in the second array is created by combining an existing object from the first array with a new object that has a different random `id`. This process is repeated 100 times to generate a large dataset.

**Html Preparation Code**

The HTML preparation code includes a reference to the Lodash library, which is used in one of the benchmark tests (`Lodash`).

**Individual Test Cases**

There are three test cases:

1. **ES6 map + find**: This test uses JavaScript's built-in `map` and `find` functions to merge the two arrays.
2. **Lodash**: This test uses Lodash's `keyBy`, `merge`, `values`, and `value` functions to achieve the same result.
3. **Reduce**: This test uses a `Map` and `reduce` function to merge the two arrays.

**Options Compared**

The three approaches compared are:

* ES6 map + find: Uses built-in JavaScript functions (`map` and `find`) for merging.
* Lodash: Uses a utility library (Lodash) with specialized functions for merging.
* Reduce: Uses a functional programming approach with a `Map` and `reduce` function.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **ES6 map + find**:
	* Pros: Fast, easy to understand, and widely supported.
	* Cons: May not be as efficient for very large datasets or complex data structures.
2. **Lodash**:
	* Pros: Provides a convenient and robust way to perform common data manipulation tasks.
	* Cons: Introduces an external dependency (Lodash) and may incur overhead due to the library's functionality.
3. **Reduce**:
	* Pros: Flexible, can be used for more complex merging scenarios, and doesn't rely on an external library.
	* Cons: May require more boilerplate code and has a steeper learning curve.

**Other Considerations**

* The benchmark measures the performance of each approach in terms of executions per second. This means that the faster execution time is considered better.
* The test data is generated randomly to ensure fair comparison between the approaches.
* The benchmark doesn't account for other factors like memory usage or data integrity, which might be relevant depending on the specific use case.

**Alternatives**

If you're looking for alternative approaches or libraries, consider:

* **Ramda**: A functional programming library that provides a range of utility functions similar to Lodash.
* **Underscore.js**: Another popular utility library that offers a subset of Lodash's functionality.
* **Itertools**: JavaScript's built-in `iterable` methods, such as `forEach`, `map`, and `reduce`, can also be used for merging data.

Keep in mind that the choice of approach ultimately depends on your specific requirements, performance considerations, and personal preference.

Related benchmarks:

mergeByKey ES6 vs Lodash vs reduce (version: 0)

Comparing performance of: ES6 map + find vs Lodash vs Reduce

Created: 3 years ago by: Guest

Jump to the latest result

ES6 map + find

Lodash

Reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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