Benchmark: mergeByKey ES6 map + find vs Lodash vs ES6 Map

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');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 map + find
Lodash
ES6 Map

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this specific benchmark.

**Benchmark Overview**

The provided JSON represents a benchmark that compares three approaches to merge two arrays by key:

1. **ES6 Map**: uses the `Map` data structure from the ECMAScript 2015 standard (ES6) to perform the merge.
2. **Lodash**: leverages the popular utility library Lodash to achieve the same result.
3. **ES6 Map + find**: uses a combination of ES6's `map()` function and the `find()` method to perform the merge.

**Options Compared**

The three options are compared in terms of their performance, which is measured by the number of executions per second.

* **Pros and Cons of each approach:**
	+ **ES6 Map**: Pros:
		- Native support for maps in modern browsers.
		- Efficient use of memory.
		Cons:
			- May not be as readable or maintainable due to its functional programming style.
	+ **Lodash**: Pros:
		- High-performance and optimized for web applications.
		- Comprehensive set of utility functions, including merging data.
		Cons:
			- Adds external dependency (the Lodash library).
			- May not be suitable for very large datasets due to memory constraints.
	+ **ES6 Map + find**: Pros:
		- Uses a familiar API (map() and find()) that many developers are already comfortable with.
		- More readable than the map-based approach.
	Cons:
		- Requires an additional function call (`find()`), which might incur overhead.
**Library Description**

In this benchmark, Lodash is used as a library to provide the `keyBy()` and `merge()` functions. These functions are part of Lodash's utility belt and help simplify common tasks like data merging.

**Special JS Features/Syntax**

The benchmark doesn't explicitly use any special JavaScript features or syntax beyond what's required for the test cases (e.g., arrow functions, template literals). However, it does utilize some advanced concepts like:

* **ECMAScript 2015 standard (ES6)**: The benchmark uses ES6's `Map` data structure and arrow functions.
* **Lodash utility functions**: Lodash is used to provide the `keyBy()` and `merge()` functions.

**Other Alternatives**

If you're interested in exploring alternative approaches, consider these options:

1. **Vanilla JavaScript**: Implement the merge logic using only native JavaScript functions (e.g., `forEach()`, `findIndex()`, `splice()`) without relying on any external libraries.
2. **Closure-based approach**: Use a closure-based approach to create an efficient and performant implementation of the merge function.
3. **More advanced data structures**: Explore other data structures like `WeakMap` or `Set` for more complex merging scenarios.

Keep in mind that these alternatives might not be as optimized or readable as the original ES6 Map, Lodash, or ES6 Map + find approaches.

Related benchmarks:

mergeByKey ES6 map + find vs Lodash vs ES6 Map (version: 2)

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

Created: 3 years ago by: Registered User

Jump to the latest result

ES6 map + find

Lodash

ES6 Map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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