Benchmark: lodash/keyBy vs native reduce vs 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 data = [
  { name: 'pi', value: 3.14 },
  { name: 'hundred', value: 100 },
  { name: 'truthy', value: true },
  { name: 'falsy', value: false },
  { name: 'estring', value: '2.71828' },
];

var keyBy = (array, fn) => {
  return array.reduce((acc, value) => {
    acc[fn(value)] = value;
    return acc;
  }, {});
};

var keyByForEach = (array, fn) => {
  var acc = {};
  _.forEach(array, (value) => {
    acc[fn(value)] = value;
  });
  return acc;
};

var keyByForLoop = (array, fn) => {
  var acc = {};
  for (let i = 0; i < array.length; i++) {
    acc[fn(array[i])] = array[i];
  }
  return acc;
};

var mapkey = (array, fn) => {
  return array.map(fn);
}

Tests:

lodash/keyBy
_.keyBy(data, (v) => v.name);
keyBy with native reduce
keyBy(data, (v) => v.name);
keyBy with forEach
keyByForEach(data, (v) => v.name);
keyBy with for loop
keyByForLoop(data, (v) => v.name);
map
mapkey(data, (v) => v.name);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash/keyBy
keyBy with native reduce
keyBy with forEach
keyBy with for loop
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
lodash/keyBy	18100128.0 Ops/sec
keyBy with native reduce	14343515.0 Ops/sec
keyBy with forEach	14704039.0 Ops/sec
keyBy with for loop	21205740.0 Ops/sec
map	60825552.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 provided JSON and benchmark cases to understand what's being tested.

**Benchmark Definition:**
The main goal of this benchmark is to compare the performance of different approaches for creating an object where each key is generated by applying a given function to an array element.

**Options Compared:**

1. **Lodash `keyBy`**: Uses Lodash's `keyBy` function, which applies a callback function to each element in the array and uses the resulting value as the key in the output object.
2. **Native `reduce`**: Uses the built-in `Array.prototype.reduce()` method with a custom callback function to achieve the same result as `keyBy`.
3. **Native `map`**: Uses the `Array.prototype.map()` method with a custom callback function, but only maps the array elements without using the resulting value as the key.
4. **Lodash `forEach`**: Uses Lodash's `forEach` function (part of the same library as `keyBy`) to iterate over the array and create the output object.
5. **Native `for loop`**: Uses a traditional `for` loop to iterate over the array and create the output object.

**Pros and Cons of each approach:**

1. **Lodash `keyBy`**:
	* Pros: Convenient, readable, and concise.
	* Cons: Requires Lodash library, might be slower due to function calls.
2. **Native `reduce`**:
	* Pros: Fast, efficient, and doesn't require an additional library.
	* Cons: Might have a steeper learning curve due to its functional programming nature.
3. **Native `map`**:
	* Pros: Simple, fast, and only uses built-in methods.
	* Cons: Doesn't use the resulting value as the key, so might not be suitable for all use cases.
4. **Lodash `forEach`**:
	* Pros: Convenient, readable, and concise.
	* Cons: Requires Lodash library, similar to `keyBy`.
5. **Native `for loop`**:
	* Pros: Familiar, easy to understand, and no additional libraries required.
	* Cons: Might be slower due to the use of a traditional loop.

**Library explanation:**
Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks like array manipulation, object creation, and more. `keyBy` is one of these functions, which helps create an object where each key is generated by applying a given function to an array element.

**Special JS feature/syntax:**
None mentioned in this benchmark, but some other examples might use features like arrow functions (e.g., `(v) => v.name`) or modern JavaScript syntax (e.g., `const` instead of `var`, template literals).

**Alternatives:**
For creating an object where each key is generated by applying a given function to an array element, you could also consider:

* Using the `Object.fromEntries()` method with an array of entries and a callback function.
* Implementing your own custom solution using a traditional `for` loop or a more modern approach like using the `reduce()` method.

Keep in mind that these alternatives might have different trade-offs in terms of performance, readability, and maintainability.

Related benchmarks:

lodash/keyBy vs native reduce vs map (version: 0)

Comparing performance of: lodash/keyBy vs keyBy with native reduce vs keyBy with forEach vs keyBy with for loop vs map

Created: 3 years ago by: Guest

Jump to the latest result

lodash/keyBy

keyBy with native reduce

keyBy with forEach

keyBy with for loop

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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