Benchmark: multi-order consolidateCartItems lodash 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 body = {
      items: [
        {
          goodsCode: 'A',
          quantity: 1,
          options: [
            {
              goodsCode: 'X',
              quantity: 1,
              options: [
                {
                  goodsCode: 'Z',
                  quantity: 2,
                },
              ],
            },
          ],
        },
        {
          goodsCode: 'A',
          quantity: 2,
          options: [
            {
              goodsCode: 'X',
              quantity: 2,
              options: [
                {
                  goodsCode: 'Z',
                  quantity: 3,
                },
              ],
            },
          ],
        },
      ],
    }

Tests:

Map (reduce)
function consolidateCartItems({ items }) { const uniqItemsMap = items.reduce((acc, item) => { const prevItem = acc.get(item.goodsCode); if (prevItem) { const options = (prevItem.options ?? []).concat(item?.options ?? []); const hasOptions = options.length > 0; const newItem = { ...prevItem, quantity: prevItem.quantity + item.quantity, }; if (hasOptions) { newItem.options = consolidateCartItems({ items: options }); } acc.set(item.goodsCode, newItem); } else { acc.set(item.goodsCode, item); } return acc; }, new Map()); return [...uniqItemsMap.values()]; } consolidateCartItems(body)
Map (for...of)
function consolidateCartItems({ items }) { const map = new Map(); for (const item of items) { const key = item.goodsCode; const existing = map.get(key); if (existing) { existing.quantity += item.quantity; const mergedOptions = (existing.options ?? []).concat(item.options ?? []); if (mergedOptions.length > 0) { existing.options = consolidateCartItems({ items: mergedOptions }); } } else { map.set(key, { ...item }); } } return [...map.values()]; } consolidateCartItems(body)
lodash
function consolidateCartItems({ items }) { const grouped = _.groupBy(items, 'goodsCode'); return Object.entries(grouped).map(([goodsCode, group]) => { const totalQuantity = _.sumBy(group, 'quantity'); const allOptions = group.flatMap((item) => item.options ?? []); const mergedOptions = allOptions.length > 0 ? consolidateCartItems({ items: allOptions }) : undefined; const result = { goodsCode, quantity: totalQuantity }; if (mergedOptions?.length) result.options = mergedOptions; return result; }); } consolidateCartItems(body)
lodash (chain)
function consolidateCartItems({ items }) { return ( _.chain(items) .groupBy('goodsCode') .map((group, goodsCode) => { const quantity = _.sumBy(group, 'quantity'); const mergedOptions = _.chain(group) .flatMap('options') .filter(Boolean) .thru((opts) => opts.length > 0 ? consolidateCartItems({ items: opts }) : undefined, ) .value(); return { goodsCode, quantity, ...(mergedOptions ? { options: mergedOptions } : {}), }; }) .value() ); } consolidateCartItems(body)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map (reduce)
Map (for...of)
lodash
lodash (chain)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Map (reduce)	4025243.2 Ops/sec
Map (for...of)	4431074.0 Ops/sec
lodash	1468709.8 Ops/sec
lodash (chain)	538737.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 days ago):

LLMs can make mistakes. Check important info.

The benchmark on MeasureThat.net compares different implementations of a cart item consolidation function written in JavaScript. This function groups items by their `goodsCode`, sums their quantities, and merges options for items with duplicate `goodsCode`. The primary objective is to evaluate performance differences between these various approaches.

### Approaches Compared

1. **Map with `reduce`**:
   ```javascript
   const uniqItemsMap = items.reduce((acc, item) => { ... }, new Map());
   ```
   - **Pros**: This method efficiently uses the reducer function to generate a single output map from the input array. As items are processed sequentially, it is relatively straightforward and keeps the code clean.
   - **Cons**: While `reduce` has its merits, it may be less intuitive for developers unfamiliar with functional programming paradigms. Performance can vary significantly based on the underlying JavaScript engine's implementation of map operations with reduce.

2. **Map with `for...of`**:
   ```javascript
   for (const item of items) { ... }
   ```
   - **Pros**: Uses a simplified approach to iterate over the items. The `for...of` loop is easy to read and understand, making it favorable for many developers.
   - **Cons**: This method may involve slightly more boilerplate than the `reduce` method but can lead to improved performance, as evidenced in the benchmark results.

3. **Lodash with `groupBy`**:
   ```javascript
   const grouped = _.groupBy(items, 'goodsCode');
   ```
   - **Pros**: Using Lodash leverages its utility functions, which can simplify tasks like grouping and summing. This can lead to very readable code and reduces boilerplate.
   - **Cons**: The reliance on an external library can introduce additional overhead, particularly if the library is bundled with an application or not fully tree-shakeable. Due to this, the performance may be slower compared to the native JavaScript solutions.

4. **Lodash with `chain`**:
   ```javascript
   _.chain(items).groupBy('goodsCode').map(...).value();
   ```
   - **Pros**: Lodash's chaining capabilities allow for a fluid programming style, enhancing readability and comprehension. Each operation can be closely linked together into a single expressive chain.
   - **Cons**: Chaining may create performance hit due to extra function calls and increased overhead compared to plain JavaScript loops and method calls.

### Benchmark Results

1. **`Map (for...of)`**: 4,431,074 executions per second (best performance).
2. **`Map (reduce)`**: 4,025,243 executions per second.
3. **`lodash`**: 1,468,709 executions per second.
4. **`lodash (chain)`**: 538,737 executions per second (worst performance).

### Additional Considerations

- **Performance**: As shown in the benchmark results, native JavaScript solutions generally outperform those that rely on a library like Lodash. This is an important criterion for applications where performance is critical, especially when processing large datasets.
- **Readability vs. Performance**: There is often a trade-off between using intuitive, readable code and optimizing for execution speed. Each developer must consider the context of their application and their team's familiarity with different paradigms.
- **Library Use**: While libraries like Lodash offer benefits in terms of functionality and ease of use, they can come at a cost to performance. For applications with high performance requirements, minimizing dependency on external libraries can yield better results.

### Alternatives

Developers have several alternatives to implement similar functionality, including:

- **Native JavaScript using plain objects**: For small data sets, constructing outputs with plain objects might suffice, eliminating overhead from `Map` or external libraries.
- **Using Functional Programming Libraries**: Other utility libraries such as Ramda or native ECMAScript features (like `Array.prototype.map`, `Array.prototype.reduce`, etc.) could be used based on the specific use case.
- **WebAssembly (Wasm)**: For performance-critical applications, re-implementing performance-critical sections using languages that compile to Wasm could be beneficial.

In conclusion, choosing an approach should consider not only the performance metrics but also the maintainability and clarity of code, along with the specific requirements and context in which the code will be executed.

Related benchmarks:

multi-order consolidateCartItems lodash vs Map (version: 1)

Comparing performance of: Map (reduce) vs Map (for...of) vs lodash vs lodash (chain)

Created: 5 days ago by: Registered User

Jump to the latest result

Map (reduce)

Map (for...of)

lodash

lodash (chain)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 days ago):