Benchmark: Lodash: differenceBy vs filter & find

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/lodash/4.16.0/lodash.min.js"></script>

Script Preparation code:

var fullArray = [
  {
    title: 'full arr 1',
    value: '1',
  },
  {
    title: 'full arr 2',    
    value: '2',
  },
  {
    title: 'full arr 3',    
    value: '3',
  }
]
var partialArray = [
  {
    id: 1,
  },
  {
    id: 3,
  }
]

Tests:

Lodash differenceBy
_.differenceBy( fullArray, partialArray.map(v => ({ value: String(v.id) })), 'value', )
javascript filter and find
fullArray.filter(full => !partialArray.find(par => String(par.id) === full.value))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash differenceBy
javascript filter and find

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash differenceBy	1354320.1 Ops/sec
javascript filter and find	1041938.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark json and explain what's being tested, compared, and the pros/cons of different approaches.

**Benchmark Description**

The test compares the performance of two methods:

1. `lodash differenceBy`: A utility function from the Lodash library that creates a new array with elements that pass a test.
2. `javascript filter` + `find`: A native JavaScript approach using the `filter()` and `find()` functions.

**Lodash Library**

The `lodash` library is a popular JavaScript utility library that provides a wide range of functions for tasks such as string manipulation, array transformation, and more. The `differenceBy` function is specifically designed to create a new array with elements that meet a certain condition based on a key.

**JavaScript Filter & Find Approach**

The native JavaScript approach uses the `filter()` function to create a new array with elements that pass a test. The `find()` function is used within the `filter()` callback to check if an element meets the condition.

Pros:

* Native JavaScript, which means it's language-agnostic and doesn't require any additional libraries.
* Can be more efficient since it doesn't require loading an external library.
* Easy to understand and implement for those familiar with native JavaScript functions.

Cons:

* Requires manual implementation of the filtering logic, which can lead to code duplication or errors if not implemented correctly.
* May have performance issues due to the overhead of function calls and array traversals.

**Comparison**

The benchmark tests both approaches on a dataset where we need to find elements in `fullArray` that match a condition based on the value of an "id" property. The comparison is done by measuring the execution time for each approach.

**Other Considerations**

* **Type Systems**: Both approaches are vulnerable to type-related errors if not implemented correctly (e.g., mismatched data types or undefined values).
* **Performance Variance**: Performance differences between browsers and devices can significantly impact benchmark results.
* **Cache Optimization**: Some modern JavaScript engines have cache optimizations that might affect performance results.

**Alternatives**

Other alternatives for filtering arrays include:

1. Using a library like `ramda` (an alternative to Lodash) or `lodash-alt`.
2. Implementing custom filtering logic using other JavaScript libraries (e.g., `moment.js`) if specific requirements demand it.
3. Using modern features like `Array.prototype.filter()` with `Promise.all()` for async filtering.

Keep in mind that the choice of alternative depends on the specific use case, performance requirements, and personal preference.

Related benchmarks:

Lodash: differenceBy vs filter & find (version: 0)

Comparing performance of: lodash differenceBy with javascript filter and find

Comparing performance of: Lodash differenceBy vs javascript filter and find

Created: 4 years ago by: Guest

Jump to the latest result

Lodash differenceBy

javascript filter and find

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