Benchmark: Array vs. Set Intersection #2

HTML Preparation code:

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

Script Preparation code:

var first = [1, 3, 4, 5, 7];
var second = [2, 3, 5, 6];

var firstSet = new Set(first);
var secondSet = new Set(second);

Tests:

Javascript Set intersection
new Set([...firstSet].filter(item => secondSet.has(item)));
Array intersection
first.filter(item => second.includes(item));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Javascript Set intersection
Array intersection

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Linux

View result in a separate tab

Test name	Executions per second
Javascript Set intersection	5567094.5 Ops/sec
Array intersection	12055970.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The benchmark is comparing two approaches to find the intersection of two arrays/set in JavaScript:

1. Using the `Set` data structure:
   ```javascript
new Set([...firstSet].filter(item => secondSet.has(item)));
```
   This approach converts the first array into a set, filters out items that are not present in the second set, and then creates a new set from the filtered result.

2. Using array filtering with `includes()` method:
   ```javascript
first.filter(item => second.includes(item));
```
   This approach uses the `filter()` method to create a new array containing only the elements that are present in both arrays/set.

**Options being compared:**

* **Set**: A data structure that stores unique values and provides efficient membership testing.
* **Array filtering with includes()**: An array-based approach using the `includes()` method, which checks for presence of an element in an array.

**Pros and Cons of each approach:**

1. **Set**:
   * Pros:
     + Efficient membership testing (O(1) on average)
     + No duplicates or ordering concerns
     + Can be used to implement more complex set operations like union, difference, and intersection
   * Cons:
     + Requires additional memory for storing the set
     + May have higher overhead due to set creation and management

2. **Array filtering with includes():**
   * Pros:
     + No extra memory requirements
     + Often faster than creating a new set (since `includes()` is optimized for arrays)
   * Cons:
     + Can be slower when dealing with large datasets or complex conditions
     + May have issues with duplicates, ordering, and null/undefined values

**Library:**

The benchmark uses the Lodash library (`https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js`), which provides a `Set` implementation that can be used to create sets and perform set operations.

**Special JavaScript feature or syntax:**

There is no special feature or syntax being used in this benchmark.

**Other alternatives:**

* **Array.prototype.filter() + Array.from():**
   Instead of using the `includes()` method, you could use the `filter()` method with an arrow function to create a new array containing only the elements that meet the condition.
   ```javascript
let result = first.filter(item => second.includes(item));
```
* **Array.reduce():**
   You can also use the `reduce()` method to find the intersection of two arrays/set. This approach would involve creating a reduce callback function that iterates through both arrays and accumulates matching elements.

These alternatives may offer different performance profiles or trade-offs depending on the specific requirements of your application.

Related benchmarks:

Array vs. Set Intersection #2 (version: 0)

Comparing performance of: Javascript Set intersection vs Array intersection

Created: 2 years ago by: Guest

Jump to the latest result

Javascript Set intersection

Array intersection

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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