Benchmark: array find vs new Set has inside a filter

array find vs new Set has inside a filter (version: 1)

I created two arrays: one with 100 numbers and another with 10,000 random numbers. Then, i filtered the first array to check for the presence of the number 5 in the second array using two different methods. In the first test case, i used the .find() method, which iterates through the 10,000-number array to locate the number 5 and returns the first matching value. In the second test case, i converted the 10,000-number array into a Set and used the .has() method to check for the presence of the number 5. The goal is to compare both approaches and determine which one is faster and which one use less memory.

Comparing performance of: array find vs new Set has

Created: one month ago by: Guest

Jump to the latest result

Script Preparation code:

const arr = [];

for (let i = 0; i < 10000; i++) {
    const n = 10 * Math.random();
    arr.push(Math.floor(n));
}

const set = new Set(arr);

const arr2 = [];

for (let i = 1; i <= 100; i++) arr2.push(i);

Tests:

array find
const testArr = arr2.filter(el => arr.find(e => e === 5));
new Set has
const testSet = arr2.filter(el => set.has(5));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array find
new Set has

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
array find	406889.0 Ops/sec
new Set has	181519.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares two methods for checking the presence of a number (specifically the number 5) in an array. The benchmark tests two approaches:

1. **Using the `.find()` Method**:
   - In the first case, the benchmark uses `arr.find(e => e === 5)` within an array filter on `arr2`. Here, `.find()` iterates through the `arr` array (which contains 10,000 random numbers) to locate the first occurrence of the number 5 and returns that value if found, or `undefined` if not found.

2. **Using a `Set` with `.has()`**:
   - In the second case, instead of searching through the array, this approach first converts `arr` into a Set (`set = new Set(arr)`). Then, it checks if the number 5 exists in the Set with `set.has(5)`. The Set data structure provides an efficient way to determine existence, as it uses a hash table internally.

### Comparison of Approaches

#### **Pros and Cons**

- **Using `.find()` Method**:
  - **Pros**:
    - Simple and straightforward to implement.
    - More readable for those familiar with array methods.
  - **Cons**:
    - Inefficiency in larger datasets, as it involves a linear search (O(n) complexity). Each time it runs, it checks every number until it finds a match.
    - Performance decreases as the size of the array increases.

- **Using a `Set` with `.has()`**:
  - **Pros**:
    - Optimal performance for existence checks, as `Set.has()` has an average time complexity of O(1) due to the hash table implementation.
    - Reduced execution time in scenarios with large arrays.
    - Less memory overhead when checking for multiple existing numbers in the future as the Set allows for quick lookups.
  - **Cons**:
    - Slightly more complex to implement since it requires an additional step of converting the array into a Set.
    - Uses more memory upfront (due to the overhead of storing keys in a Set) but this trade-off is often worth it for efficiency.

### Other Considerations

- The benchmark measures how many executions can be performed per second for each method, revealing that the Set approach outperforms the `.find()` method significantly:
  - **`new Set has`**: 1,951,830.375 executions per second.
  - **`array find`**: 1,184,509.375 executions per second.

The results showcase that the Set approach is nearly **65% faster** than using the `.find()` method, particularly evident given larger input sizes.

### Alternatives

1. **Using a plain loop**: Instead of `.find()`, a simple `for` loop could iterate through `arr`, checking for the number 5. This approach is similar in performance to `.find()`, with O(n) complexity.

2. **Binary Search**: If the array is sorted, a binary search could be used, allowing for O(log n) complexity. However, this requires additional steps to sort the array first—introducing O(n log n) complexity for initial sorting.

3. **Other Data Structures**: Besides `Set`, using a `Map` could allow similar checks and can also provide additional data handling capabilities if needed.

In conclusion, the benchmark effectively demonstrates how different data structures and methods can lead to significant performance differences in JavaScript, particularly when handling larger datasets. The findings endorse the use of Sets for existence checks as a robust practice for efficiency in performance-sensitive applications.

Related benchmarks: