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

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Lodash differenceBy

2.7M/s

javascript filter and find

1.9M/s

Fastest: Lodash differenceBy (1.4x faster)

View exact numbers

✓ Lodash differenceBy: 2,696,533 ops/sec
• javascript filter and find: 1,926,191 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

javascript filter and find

9.7M/s

Lodash differenceBy

3.0M/s

View exact numbers

Test name	Executions per second
✓ javascript filter and find	9,723,429 Ops/sec
Lodash differenceBy	3,032,583 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

Lodash: differenceBy vs filter & find (version: 0) Benchmark.js

Comparing performance of: lodash differenceBy with javascript filter and find

Comparing performance of: `Lodash differenceBy vs javascript filter and find`

Created: 5 years ago by: Guest

Go to the latest result

Lodash differenceBy

javascript filter and find

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Lodash: differenceBy vs filter & find (version: 0) Benchmark.js

Comparing performance of: lodash differenceBy with javascript filter and find

Comparing performance of: Lodash differenceBy vs javascript filter and find

Created: 5 years ago by: Guest

Go to the latest result

Lodash differenceBy

javascript filter and find

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Lodash differenceBy vs javascript filter and find`