Benchmark: lodash vs Map - v2

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
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 - v2
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 = mergeOptions(existing.options ?? [], item.options ?? []); if (mergedOptions.length > 0) { existing.options = consolidateCartItems({ items: mergedOptions }); } } else { map.set(key, { ...item }); } } return [...map.values()]; } function mergeOptions(a, b) { return [...a, ...b]; } consolidateCartItems(body)
lodash
function consolidateCartItems({ items }) { return ( _.chain(items) // goodsCode를 기준으로 그룹화 .groupBy('goodsCode') .map((group, goodsCode) => { // 그룹 내 전체 수량 합산 const quantity = _.sumBy(group, 'quantity'); // 옵션들을 한 곳에 모은 후 존재 여부 확인 const mergedOptions = _.chain(group) .flatMap('options') // 모든 옵션을 평탄화 .filter(Boolean) // null/undefined 필터링 .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
Map - v2
lodash

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	4115513.0 Ops/sec
Map - v2	5582452.0 Ops/sec
lodash	559473.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares three different approaches for consolidating cart items based on their `goodsCode`, utilizing JavaScript's native `Map` object and the Lodash library.

### Approaches Being Compared

1. **Map Approach - v2**
   - **Description**: This method iterates through `items` with a `for...of` loop, utilizing a `Map` to store unique items based on their `goodsCode`. It updates quantities and merges options recursively as needed.
   - **Pros**:
     - **Efficiency**: `Map` provides constant-time complexity for insertions and lookups, which can lead to efficient performance when consolidating large datasets.
     - **Clarity**: The logic is straightforward and leverages native JavaScript features.
   - **Cons**:
     - Requires a manual implementation of merging logic, which could be more verbose than higher-level abstractions.

2. **Map Approach**
   - **Description**: This is a slightly different implementation that follows similar logic to the `Map - v2`, yet may have variations in option handling.
   - **Pros**: Shares the same efficiencies as the v2 version due to the use of `Map`.
   - **Cons**: May not be as optimized in terms of merging logic compared to the `Map - v2`.

3. **Lodash Approach**
   - **Description**: Leveraging the Lodash utility library, this approach uses functional programming techniques like `_.chain`, `groupBy`, and `map` to group and process items more declaratively. It uses Lodash’s `flatMap` to flatten the options and `thru` to apply conditional logic.
   - **Pros**:
     - **Simplicity**: High-level abstractions make the code shorter and potentially easier to read and understand, especially for those familiar with Lodash.
     - **Decoupled Logic**: Functional chaining helps keep transformation logic tidy and modular.
   - **Cons**:
     - **Performance**: This approach can be slower due to the overhead of function call stacks and internal optimizations (e.g., Lodash's chaining).
     - **Dependency**: Introduces an additional library dependency, which increases the project’s bundled size and complexity.

### Libraries Utilized

- **Lodash**: Lodash is a JavaScript utility library that provides helpful functions for common programming tasks, promoting functional programming paradigms. It includes functions for array manipulation, object manipulation, and performance enhancement. Here, it aids in transforming and consolidating a list of cart items.

### JavaScript Features and Considerations

- **Map object**: The `Map` data structure allows you to store key-value pairs where keys can be of any type, and it maintains insertion order. It's particularly useful when performance in terms of looking up and inserting new entries is critical.
  
- **Functional Programming Techniques**: The use of methods like `chain`, `map`, and `flatMap` exemplifies functional programming practices that enhance readability and efficiency by minimizing mutations.

### Alternatives

In addition to the approaches tested here, other alternatives could include:

- **Plain Objects**: Similar processes can be accomplished using plain JavaScript objects, although they lack some benefits of `Map`, such as preserving the order of entries or allowing non-string keys.
  
- **Reduce Method**: Combining the use of `reduce()` method with plain arrays or objects can yield a similar outcome with functional style but might require more careful handling of cases like deep merging.

In summary, each approach has specific strengths and weaknesses based on the context in which they are used, the size of the data set, and the need for code clarity versus execution speed. The comparisons help to demonstrate how developers can choose different tools and techniques based on their specific requirements.

Related benchmarks:

lodash vs Map - v2 (version: 1)

consolidate

Comparing performance of: Map vs Map - v2 vs lodash

Created: 5 days ago by: Guest

Jump to the latest result

Map

Map - v2

lodash

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):