Benchmark: lodash/keyBy vs native reduce vs native with spread

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

​x
 
​
<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 keyBySpread = (array, fn) => {
    return array.reduce((acc, value) => ({
        ...acc,
        [fn(value)]: value
    }), {});
};

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 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 keyBySpread = (array, fn) => {    return array.reduce((acc, value) => ({        ...acc,        [fn(value)]: value    }), {});};​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(data, (v) => v.name);
keyBy with native reduce
keyBy(data, (v) => v.name);
keyBy(data, (v) => v.name);
keyBy with forEach
keyByForEach(data, (v) => v.name);
keyByForEach(data, (v) => v.name);
keyBy with for loop
keyByForLoop(data, (v) => v.name);
keyByForLoop(data, (v) => v.name);
KeyBy with spread operator
keyBySpread(data, (v) => v.name);
keyBySpread(data, (v) => v.name);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
lodash/keyBy
keyBy with native reduce
keyBy with forEach
keyBy with for loop
KeyBy with spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 95 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash/keyBy	3147518.0 Ops/sec
keyBy with native reduce	4158269.8 Ops/sec
keyBy with forEach	2327895.5 Ops/sec
keyBy with for loop	4388728.0 Ops/sec
KeyBy with spread operator	949298.6 Ops/sec

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

I'll break down the provided benchmark and explain what's being tested, compared, and its implications.

Benchmark Overview

The test measures the performance of four different approaches to create a key-value map from an array of objects:

lodash/keyBy (Lodash's implementation)
keyBy with native reduce
keyByForEach (using Lodash's forEach method)
keyByForLoop (using a traditional for loop)

What's Being Tested

Each test case is executed multiple times to measure the execution time per second (ExecutionsPerSecond). The results are then compared across different approaches.

Options Compared

Here's a brief overview of each approach:

Lodash/keyBy: Lodash's keyBy function uses a combination of reduce and object assignment to create the key-value map.
KeyBy with native reduce: This approach uses the native reduce() method to iterate over the array, creating the key-value map using spread operator ([...acc, [fn(value), value]]).
KeyByForEach: This approach uses Lodash's forEach method to iterate over the array, adding each object to the result with its key as the property name.
KeyByForLoop: This traditional for loop implementation iterates over the array using a traditional loop, assigning each object to the result with its key as the property name.

Pros and Cons

Here are some general pros and cons of each approach:

Lodash/keyBy: Pros: concise, easy to read; Cons: might have overhead due to Lodash's abstraction.
KeyBy with native reduce: Pros: efficient, native implementation; Cons: might be less readable for those unfamiliar with spread operator usage.
KeyByForEach: Pros: easy to understand, uses familiar Lodash API; Cons: potentially slower due to function call overhead.
KeyByForLoop: Pros: traditional loop is well understood; Cons: verbose, error-prone.

Library and Special JS Features

The lodash/keyBy implementation uses the Lodash library, which provides a concise way to create key-value maps.

There are no special JavaScript features mentioned in this benchmark that aren't already explained above.

Alternatives

Other alternatives for creating key-value maps include:

Using Array.prototype.reduce() without spread operator (acc[fn(value)] = value;)
Using Object.keys(), map(), and reduce() (not shown in this benchmark)
Implementing a custom loop or recursive function

Please note that these alternatives might not be as efficient or readable as the approaches tested in this benchmark.

Overall, this benchmark provides a good comparison of different approaches to creating key-value maps in JavaScript, highlighting the trade-offs between conciseness, readability, and performance.

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and its implications.

**Benchmark Overview**

The test measures the performance of four different approaches to create a key-value map from an array of objects:

1. `lodash/keyBy` (Lodash's implementation)
2. `keyBy` with native reduce
3. `keyByForEach` (using Lodash's `forEach` method)
4. `keyByForLoop` (using a traditional for loop)

**What's Being Tested**

Each test case is executed multiple times to measure the execution time per second (`ExecutionsPerSecond`). The results are then compared across different approaches.

**Options Compared**

Here's a brief overview of each approach:

1. **Lodash/keyBy**: Lodash's `keyBy` function uses a combination of reduce and object assignment to create the key-value map.
2. **KeyBy with native reduce**: This approach uses the native `reduce()` method to iterate over the array, creating the key-value map using spread operator (`[...acc, [fn(value), value]]`).
3. **KeyByForEach**: This approach uses Lodash's `forEach` method to iterate over the array, adding each object to the result with its key as the property name.
4. **KeyByForLoop**: This traditional for loop implementation iterates over the array using a traditional loop, assigning each object to the result with its key as the property name.

**Pros and Cons**

Here are some general pros and cons of each approach:

1. **Lodash/keyBy**: Pros: concise, easy to read; Cons: might have overhead due to Lodash's abstraction.
2. **KeyBy with native reduce**: Pros: efficient, native implementation; Cons: might be less readable for those unfamiliar with spread operator usage.
3. **KeyByForEach**: Pros: easy to understand, uses familiar Lodash API; Cons: potentially slower due to function call overhead.
4. **KeyByForLoop**: Pros: traditional loop is well understood; Cons: verbose, error-prone.

**Library and Special JS Features**

The `lodash/keyBy` implementation uses the Lodash library, which provides a concise way to create key-value maps.

There are no special JavaScript features mentioned in this benchmark that aren't already explained above.

**Alternatives**

Other alternatives for creating key-value maps include:

* Using `Array.prototype.reduce()` without spread operator (`acc[fn(value)] = value;`)
* Using `Object.keys()`, `map()`, and `reduce()` (not shown in this benchmark)
* Implementing a custom loop or recursive function

Please note that these alternatives might not be as efficient or readable as the approaches tested in this benchmark.

Overall, this benchmark provides a good comparison of different approaches to creating key-value maps in JavaScript, highlighting the trade-offs between conciseness, readability, and performance.

Related benchmarks:

lodash/keyBy vs native reduce vs native with spread (version: 0)

Comparing performance of: lodash/keyBy vs keyBy with native reduce vs keyBy with forEach vs keyBy with for loop vs KeyBy with spread operator

Created: 3 years ago by: Guest

Jump to the latest result

lodash/keyBy

keyBy with native reduce

keyBy with forEach

keyBy with for loop

KeyBy with spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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