Benchmark: lodash/keyBy vs native reduce vs Object.groupBy 2

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;
};

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);
Native Object.groupBy
Object.groupBy(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
Native Object.groupBy

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash/keyBy	15594077.0 Ops/sec
keyBy with native reduce	15941888.0 Ops/sec
keyBy with forEach	11389180.0 Ops/sec
keyBy with for loop	17744144.0 Ops/sec
Native Object.groupBy	2666574.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The provided JSON represents a benchmark that tests three approaches to group an array by a common property: `keyBy` (from Lodash), `keyBy` with native `reduce`, and `Object.groupBy`. The data used for this benchmark is a simple array of objects, where each object has a unique value in the `name` property.

**Options Compared**

The three options being compared are:

1. **Lodash `keyBy`**: A utility function that takes an array and a function as input, grouping the elements by the output of the function.
2. **Native `reduce` with `keyBy`**: Using the native `reduce` method to achieve the same grouping effect as Lodash's `keyBy`.
3. **`Object.groupBy`**: A built-in JavaScript method that groups an array of objects by a common property.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Lodash `keyBy`**:
	* Pros: Simple, concise code, and well-maintained library.
	* Cons: Adds an external dependency (Lodash), which might impact performance or memory usage in some cases.
2. **Native `reduce` with `keyBy`**:
	* Pros: Utilizes native functionality, potentially better performance compared to Lodash's implementation.
	* Cons: Requires a deeper understanding of the `reduce` method and its parameters.
3. **`Object.groupBy`**:
	* Pros: Built-in JavaScript method, no external dependencies, and easy to use.
	* Cons: Might be slower than native `reduce` or Lodash's implementation due to additional overhead.

**Library and Syntax**

The Lodash library is a popular utility belt for JavaScript that provides various functional programming helpers. In this benchmark, the `keyBy` function is used to group the data by the `name` property.

There are no special JS features or syntax mentioned in this benchmark.

**Alternative Approaches**

If you're interested in exploring alternative approaches, here are a few options:

1. **Using an array map**: You can use the `map()` method to create a new array with the grouped elements.
```javascript
data.map((item) => ({ [item.name]: item }));
```
2. **Using a for...of loop**: You can iterate over the data using a for...of loop and group the elements manually.
```javascript
const result = {};
for (const item of data) {
  result[item.name] = item;
}
```
3. **Using a custom implementation**: You can write your own function to achieve the grouping effect.

Keep in mind that these alternative approaches might not be as concise or efficient as the ones mentioned above, but they can provide valuable insights into different programming strategies.

Related benchmarks:

lodash/keyBy vs native reduce vs Object.groupBy 2 (version: 0)

Comparing performance of: lodash/keyBy vs keyBy with native reduce vs keyBy with forEach vs keyBy with for loop vs Native Object.groupBy

Created: one year ago by: Guest

Jump to the latest result

lodash/keyBy

keyBy with native reduce

keyBy with forEach

keyBy with for loop

Native Object.groupBy

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):