Benchmark: Big array: Lodash vs. Set Intersection vs Loop with Set

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 = new Array(1000).fill().map((_,a) => a);
var second = first.slice(900);

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Javascript Set intersection
Lodash intersection
Loop with Set

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Javascript Set intersection	65012.0 Ops/sec
Lodash intersection	24291.1 Ops/sec
Loop with Set	111217.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 7 days ago):

LLMs can make mistakes. Check important info.

The benchmark presented is designed to evaluate the performance of three different approaches for finding the intersection of two arrays in JavaScript. An intersection operation returns the elements that are present in both arrays. The different approaches compared in this benchmark are:

1. **JavaScript Set Intersection**
   - **Code**: 
     ```javascript
     const firstSet = new Set(first);
     const secondSet = new Set(second);
     new Set([...firstSet].filter(item => secondSet.has(item)));
     ``` 
   - **Explanation**: This method creates two `Set` objects from the input arrays `first` and `second`, which inherently eliminate duplicates and allow for efficient lookup. It uses the `filter` method to iterate over the first set, checking if each element exists in the second set.
   - **Pros**: 
     - Benefits from the efficient O(1) average time complexity for lookups in a Set.
   - **Cons**: 
     - Additional memory usage from creating two sets, which may be significant with larger datasets.

2. **Lodash Intersection**
   - **Code**: 
     ```javascript
     _.intersection(first, second)
     ```
   - **Library Used**: **Lodash** is a popular utility library for JavaScript that provides many helpful functions for tasks such as manipulating arrays and objects. The `intersection` function in Lodash finds common elements between the arrays.
   - **Pros**: 
     - Simple and concise syntax, leveraging the well-optimized function from the library.
   - **Cons**: 
     - Performance may not be as good as a custom solution using native JavaScript, particularly on larger input sizes, due to additional overhead from generic processing.

3. **Loop with Set**
   - **Code**: 
     ```javascript
     const firstSet = new Set(first);
     second.filter(item => firstSet.has(item));
     ```
   - **Explanation**: Similar to the Set Intersection, this method also creates a Set from the first array for quick lookups. It uses the `filter` method on the second array to return all elements that are present in the first Set.
   - **Pros**: 
     - This approach strikes a balance between readability and performance, benefiting from the O(1) lookup time of the Set.
   - **Cons**: 
     - Still requires additional memory for the Set, but less iteration processing than some native methods.

### Benchmark Results

The results show the execution rates (Executions Per Second) for each approach:

1. **Loop with Set**: 111,217 executions per second (fastest).
2. **JavaScript Set Intersection**: 65,012 executions per second (moderate).
3. **Lodash Intersection**: 24,291 executions per second (slowest).

### Summary of Considerations
- **Performance vs Readability**: The native JavaScript methods (especially using `Set`) outperform the Lodash alternative significantly, but the Lodash method offers succinctness and ease of use for developers who prioritize readability.
- **Memory Usage**: All three methods utilize additional memory for storing Sets, but the performance gain often outweighs this cost for larger datasets.
- **Browser Compatibility**: All methods should work well in modern browsers, but using polyfills or transpilers might be necessary if targeting older environments.

### Alternatives
Other alternatives for achieving the intersection could include:
- Nested loops: This traditional method directly compares each element of both arrays. This has an O(n*m) time complexity, making it significantly slower and less efficient than all the above methods.
- `filter` and `includes`: While not as efficient, using `filter` to check `includes` on the other array has the same O(n*m) complexity.
- Using types from TypeScript for better clarity and type safety if integrations involve more structured data.

In conclusion, developers should choose their approach based on the specific requirements of their application regarding speed, readability, and memory constraints. For performance-critical applications, the native JavaScript Set methods are generally preferable.

Related benchmarks:

Big array: Lodash vs. Set Intersection vs Loop with Set (version: 1)

Comparing performance of: Javascript Set intersection vs Lodash intersection vs Loop with Set

Created: 7 days ago by: Guest

Jump to the latest result

Javascript Set intersection

Lodash intersection

Loop with Set

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 7 days ago):