Benchmark: lodash groupBy vs Array.reduce(3 ways) 10k

HTML Preparation code:

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

Script Preparation code:

var max2 = 10000;

var data = [];
for (var i = 0; i <= max2; i++) { data.push({ id: i, title: `a${i}bc` }); }

function whileGroup(data) {
  const grouped = {};
  const length = data.length;
  let i = 0;

  while(i < length) {
    const item = data[i];
    if(grouped[item.id]) grouped[item.id].push(item);
    else grouped[item.id] = [];
    
    i++;
  } 
  
  return grouped;
}

Tests:

Lodash
_.groupBy(data, ({ id }) => id)
Native reduce
data.reduce((acc, item) => { if(acc[item.id]) acc[item.id].push(item); else acc[item.id] = [item]; return acc; }, {})
Native reduce (ownProperty check)
data.reduce((acc, item) => { if({}.hasOwnProperty.call(acc, "id")) acc[item.id].push(item); else acc[item.id] = [item]; return acc; }, {})
Native reduce (only if)
data.reduce((acc, item) => { if(!acc[item.id]) acc[item.id] = []; acc[item.id].push(item); return acc; }, {})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash
Native reduce
Native reduce (ownProperty check)
Native reduce (only if)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of different approaches to group an array of objects by a common property, specifically the `id` field in this case. The test compares four methods:

1. Lodash's `groupBy` function
2. Native JavaScript `reduce` method with a custom callback
3. Native JavaScript `reduce` method with an additional check for the presence of the `id` property using `hasOwnProperty.call`
4. Native JavaScript `reduce` method without any checks, only grouping if the key does not exist in the accumulator

**Options Compared**

Each option presents different trade-offs:

* Lodash's `groupBy` provides a concise and readable way to group data, but it may incur overhead due to its additional functionality.
* Native JavaScript `reduce` with a custom callback is a basic implementation that requires manual iteration and checks. It can be faster if optimized correctly but is more error-prone.
* Native JavaScript `reduce` with an ownProperty check provides an intermediate approach that balances conciseness with safety, reducing the chance of errors due to incorrect keys.
* Native JavaScript `reduce` without any checks takes advantage of JavaScript's property existence checks, making it potentially faster and more efficient.

**Pros and Cons**

1. **Lodash's `groupBy`**
	* Pros: Readable, concise code; provides an additional layer of safety against incorrect keys.
	* Cons: May incur overhead due to its functionality.
2. **Native JavaScript `reduce` with custom callback**
	* Pros: Fast, lightweight implementation; requires manual iteration and checks for performance optimization.
	* Cons: Error-prone if not implemented correctly; requires explicit checks for key existence.
3. **Native JavaScript `reduce` with ownProperty check**
	* Pros: Balances conciseness with safety, reducing the chance of errors due to incorrect keys.
	* Cons: May still incur additional overhead compared to native `reduce` without checks.
4. **Native JavaScript `reduce` without any checks**
	* Pros: Fastest and most efficient implementation; takes advantage of JavaScript's property existence checks.
	* Cons: May be more error-prone due to the reliance on property existence checks.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions for common tasks, such as data manipulation, string manipulation, and more. In this benchmark, Lodash's `groupBy` function is used to group an array of objects by their `id` field.

**Special JS Features/ Syntax**

There are no special features or syntaxes mentioned in the provided benchmark code or JSON definition.

**Alternatives**

Other alternatives for grouping arrays of objects include:

* Using a library like **Underscore.js**, which provides similar functionality to Lodash's `groupBy` function.
* Implementing a custom loop-based approach, iterating through each element and adding it to the corresponding group in an object.
* Utilizing modern JavaScript features, such as **Array.prototype.reduce()` with a callback function that returns an object representing the grouped result.

Note: The best approach for grouping arrays of objects depends on the specific use case, performance requirements, and personal preference.

Latest run results:

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

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

Browser/OS: Chrome 113 on Windows

View result in a separate tab

Test name	Executions per second
Lodash	1673.0 Ops/sec
Native reduce	3280.6 Ops/sec
Native reduce (ownProperty check)	2660.4 Ops/sec
Native reduce (only if)	1376.3 Ops/sec

Related benchmarks:

lodash groupBy vs Array.reduce(3 ways) 10k (version: 0)

Comparing performance of: Lodash vs Native reduce vs Native reduce (ownProperty check) vs Native reduce (only if)

Created: 2 years ago by: Guest

Jump to the latest result

Lodash

Native reduce

Native reduce (ownProperty check)

Native reduce (only if)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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