Benchmark: Lodash intersection vs filter find2

HTML Preparation code:

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

Script Preparation code:

arr1 = [1, 2, 3]
arr2 = [{id: 1}, {id: 4}]

Tests:

lodash intersection
_.intersectionWith(arr1, arr2, (a, b) => a === b.id)
filter find
arr1.filter(a => arr2.find(b => a === b.id))
filter findIndex
arr1.filter(a => arr2.findIndex(b => a === b.id) > -1)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash intersection
filter find
filter findIndex

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
lodash intersection	3013067.0 Ops/sec
filter find	17500784.0 Ops/sec
filter findIndex	19561716.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON.

**Benchmark Definition**

The benchmark is comparing three approaches to find common elements between two arrays:

1. `_.intersectionWith(arr1, arr2, (a, b) => a === b.id)` - This approach uses the Lodash library (`_`) and its `intersectionWith` function. The callback function `(a, b) => a === b.id` is used to compare elements.
2. `arr1.filter(a => arr2.find(b => a === b.id))` - This approach uses vanilla JavaScript's `filter`, `find`, and arrow functions.
3. `arr1.filter(a => arr2.findIndex(b => a === b.id) > -1)` - This approach also uses vanilla JavaScript's `filter`, but with `findIndex` instead of `find`.

**Options Compared**

The three approaches are being compared to determine which is the most efficient.

**Pros and Cons of Each Approach:**

1. **Lodash Intersection**:
	* Pros:
		+ Concise and readable code
		+ Optimized for performance by using a custom comparison function
	* Cons:
		+ Requires including an external library (Lodash)
		+ May have slower startup times due to the additional dependency
2. **Vanilla JavaScript Filter** (Find):
	* Pros:
		+ No external dependencies required
		+ Fast and lightweight
	* Cons:
		+ Code can be less readable and more verbose
		+ Requires manual handling of edge cases (e.g., `find` returns `undefined` if no match is found)
3. **Vanilla JavaScript Filter** (FindIndex):
	* Pros:
		+ Similar to the Find approach, but with a simpler implementation
		+ Fast and lightweight
	* Cons:
		+ Still requires manual handling of edge cases
		+ May have slightly slower performance due to the `findIndex` function

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a set of functions for tasks like array manipulation, object manipulation, and more. The `intersectionWith` function is specifically designed for finding common elements between two arrays, using a custom comparison function.

**Special JS Features/Syntax**

There are no special features or syntax used in this benchmark. All code uses standard JavaScript syntax and features.

**Alternative Approaches**

Other possible approaches to find common elements between two arrays could include:

1. Using `reduce` instead of `filter`
2. Using a `Set` data structure to keep track of unique elements
3. Implementing a custom iterative solution using loops

However, these alternatives are not included in the provided benchmark, and their performance would likely be different from the three approaches being compared.

Related benchmarks:

Lodash intersection vs filter find2 (version: 1)

Comparing performance of: lodash intersection vs filter find vs filter findIndex

Created: 2 years ago by: Registered User

Jump to the latest result

lodash intersection

filter find

filter findIndex

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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