Benchmark: Array Intersection vs. Set Intersection vs. Lodash [toby]

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 = [...Array(100)].map(it => ~~(Math.random() * 1000));
var second = [...Array(20)].map(it => ~~(Math.random() * 1000));

const firstSet = new Set(first);

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Javascript Set intersection
Lodash intersection
Javascript Array intersection

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Javascript Set intersection	1102998.9 Ops/sec
Lodash intersection	493168.4 Ops/sec
Javascript Array intersection	758517.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares three different approaches for finding the intersection of two arrays in JavaScript. Specifically, it tests the performance of:

1. **JavaScript Set Intersection**
2. **Lodash Intersection**
3. **JavaScript Array Intersection**

### Benchmark Options Explained

1. **JavaScript Set Intersection**:
   ```javascript
   const secondSet = new Set(second);
   new Set([...firstSet].filter(item => secondSet.has(item)));
   ```
   - **Description**: This method utilizes JavaScript's Set object to efficiently check for the presence of elements from the first array in the second array.
   - **Pros**:
     - Fast look-up time due to the Set's unique characteristics, resulting in average time complexity of O(n) for lookups.
     - Creates a new Set of the intersection, ensuring uniqueness.
   - **Cons**:
     - Some overhead related to converting one array into a Set.

2. **Lodash Intersection**:
   ```javascript
   _.intersection(first, second);
   ```
   - **Description**: This is a utility from the Lodash library, which simplifies the task of finding the intersection of arrays.
   - **Pros**:
     - Offers a clean and readable interface for identifying intersections.
     - Handles various edge cases and can be easily modified to work with multiple arrays.
   - **Cons**:
     - It may not be as fast as the native Set approach, especially in larger datasets where performance can lag.
     - Requires the inclusion of the Lodash library, which increases the file size of the application.

3. **JavaScript Array Intersection**:
   ```javascript
   first.filter(it => second.includes(it));
   ```
   - **Description**: This method uses `Array.prototype.filter()` combined with `Array.prototype.includes()`, iterating through `first` and checking if each element exists in `second`.
   - **Pros**:
     - Simple and straightforward, making it easy for developers to understand.
     - No external libraries are needed; it’s purely native JavaScript.
   - **Cons**:
     - Inefficient as it has O(n*m) time complexity due to nested iterations (where n is the length of the first array and m is the length of the second array).
     - Performance can degrade significantly with larger datasets compared to the Set approach.

### Additional Considerations

- **Performance**: When dealing with larger datasets, the choice of method can significantly impact performance. Sets generally offer better performance characteristics for this type of operation due to their optimized look-up times.
  
- **Library Usage**: Lodash is a popular utility library that provides helpful functions for everyday programming tasks. However, it adds to the bundle size, which is a critical consideration for performance-sensitive applications, especially on the web.

### Alternatives

- **Including Other Libraries**: Apart from Lodash, there are other libraries like Underscore.js that also provide similar utility functions for array manipulation.
  
- **Native Implementations with ES6**: With the advent of ES6, options like the native `Map` and `Set` have been increasingly favored for set-like manipulations, presenting opportunities for cleaner and potentially faster code compared to traditional array methods.

- **Custom Implementations**: Developers often implement their own custom functions for specific use cases or optimizations based on business logic. This allows for more tailored solutions but requires consideration of edge cases and thorough testing.

In summary, when selecting an approach for finding intersections in arrays, developers should weigh the benefits of performance, readability, and resource usage, especially when working within the constraints of client-side environments like browsers.

Related benchmarks:

Array Intersection vs. Set Intersection vs. Lodash [toby] (version: 1)

Comparing performance of: Javascript Set intersection vs Lodash intersection vs Javascript Array intersection

Created: 5 months ago by: Guest

Jump to the latest result

Javascript Set intersection

Lodash intersection

Javascript Array intersection

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):