Benchmark: Array Intersection vs. Set Intersection vs. Lodash part 4

HTML Preparation code:

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

Script Preparation code:

var first = [...Array(100)].map(it => ~~(Math.random() * 1000));
var second = [...Array(20)].map(it => ~~(Math.random() * 1000));

var firstSet = new Set(first);
var secondSet = new Set(second);

Tests:

Lodash intersection
_.intersection(first, second)
Javascript Array intersection - filter
first.filter(it => second.includes(it))
Javascript Array intersection - loop
let _intersection = new Array() for (let elem of second) { if (first.indexOf(elem) > -1) { _intersection.push(elem) } } return _intersection
Javascript Set intersection - filter
new Set([...firstSet].filter(item => secondSet.has(item)));
Javascript Set intersection - loop
let _intersection = new Set() for (let elem of secondSet) { if (firstSet.has(elem)) { _intersection.add(elem) } } return _intersection

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash intersection
Javascript Array intersection - filter
Javascript Array intersection - loop
Javascript Set intersection - filter
Javascript Set intersection - loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 92 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Lodash intersection	319312.2 Ops/sec
Javascript Array intersection - filter	98532.3 Ops/sec
Javascript Array intersection - loop	153291.7 Ops/sec
Javascript Set intersection - filter	99804.6 Ops/sec
Javascript Set intersection - loop	418040.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net!

**Benchmark Overview**

The benchmark measures the performance of different approaches to finding the intersection of two arrays/set: Lodash's `intersection` function, JavaScript array filtering with `includes`, looping through one array and checking for presence in the other, set filtering using sets, and another looping approach.

**Options Compared**

We have four main options being compared:

1. **Lodash Intersection**: Uses Lodash's `intersection` function to find the intersection of two arrays.
2. **JavaScript Array Filtering**: Uses JavaScript's built-in `includes` method to filter out elements from one array that are not present in another.
3. **Looping Through One Array**: Loops through one array and checks for presence in the other array using `indexOf`.
4. **Set Filtering**: Uses sets to find the intersection of two arrays.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Lodash Intersection**:
	* Pros: Fast, efficient, and well-optimized.
	* Cons: Requires Lodash library inclusion, which might be overhead for some browsers.
2. **JavaScript Array Filtering**:
	* Pros: Easy to understand, lightweight, and doesn't require any external libraries.
	* Cons: Can be slower due to the `includes` method's complexity.
3. **Looping Through One Array**:
	* Pros: Lightweight, easy to implement, and works well for small arrays.
	* Cons: Can be slow due to the overhead of loop iterations and `indexOf` checks.
4. **Set Filtering**:
	* Pros: Fast, efficient, and scalable for large arrays.
	* Cons: Requires support for sets in JavaScript (introduced in ES6), which might not be available in older browsers.

**Library and Syntax Used**

The benchmark uses the following libraries:

1. Lodash library (included via `<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js'></script>`).
2. JavaScript sets are used for set filtering, which is a built-in feature introduced in ES6.

**Other Considerations**

When evaluating these options, consider the following:

* Performance: Set filtering and Lodash's `intersection` function tend to be faster.
* Weight: Looping through one array can be lightweight, but may not scale well.
* Complexity: JavaScript array filtering is relatively simple, while set filtering requires some understanding of sets.

**Alternatives**

If you're interested in exploring other approaches, consider the following:

1. **Native Set Intersection**: If your target browsers support ES6+ sets, using `new Set([...firstSet].filter(item => secondSet.has(item)))` or `new Set([...secondSet].filter(item => firstSet.has(item)))` could be an alternative.
2. **Other Libraries**: There are other libraries available that implement set operations and filtering, such as MathJax or fast-set.
3. **Native Array Filtering**: You can use JavaScript's built-in `filter()` method with a callback function to achieve similar results.

Keep in mind that these alternatives might not be directly comparable to the benchmarked options, as they may have different performance characteristics and use cases.

Now, take a deep breath and go forth to optimize your JavaScript code!

Related benchmarks:

Array Intersection vs. Set Intersection vs. Lodash part 4 (version: 0)

Comparing performance of: Lodash intersection vs Javascript Array intersection - filter vs Javascript Array intersection - loop vs Javascript Set intersection - filter vs Javascript Set intersection - loop

Created: 3 years ago by: Guest

Jump to the latest result

Lodash intersection

Javascript Array intersection - filter

Javascript Array intersection - loop

Javascript Set intersection - filter

Javascript Set intersection - loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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