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

Reduce

180.0M/s

Lodash

141/s

ES6 map + find

4/s

View exact numbers

Test name	Executions per second
✓ Reduce	180,019,136 Ops/sec
Lodash	141 Ops/sec
ES6 map + find	4 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.

mergeByKey ES6 vs Lodash vs reduce (version: 0) Benchmark.js

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

Created: 4 years ago by: Guest

Go 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):

mergeByKey ES6 vs Lodash vs reduce (version: 0) Benchmark.js

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

Created: 4 years ago by: Guest

Go 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):

Related benchmarks

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