Benchmark: Array.includes() vs Set.has() for small Arrays invoked many times

Script Preparation code:

function getArray(length) {
  const result = [];
  for (let i = 0; i < length; i++) {
    result.push(i + 'abc'); // In case the browser does some sort of optimization for arrays with only integers ¯\_(ツ)_/¯
  }
  return result;
}

function getRandomTargetElement(arrayLength) {
  const index = Math.floor(Math.random() * arrayLength);
  return index + 'abc';
}


array_small = getArray(20);

set_small = new Set(array_small);

Tests:

Array.includes, 20 elements
array_small.includes(getRandomTargetElement(20));
Set.has, 20 elements
set_small.has(getRandomTargetElement(20))
Array to Set + Set.has, 10 000 elements
const target = getRandomTargetElement(10000); const set = new Set(array_small); set.has(target)
Array to Set + Set.has x 1000, 20 elements
const set = new Set(array_small); for (let i = 0; i < 1000; i++) { const target = getRandomTargetElement(20); set.has(target) }
Array.includes x 1000, 20 elements
for (let i = 0; i < 1000; i++) { const target = getRandomTargetElement(20); array_small.includes(target) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.includes, 20 elements
Set.has, 20 elements
Array to Set + Set.has, 10 000 elements
Array to Set + Set.has x 1000, 20 elements
Array.includes x 1000, 20 elements

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; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
Array.includes, 20 elements	11460438.0 Ops/sec
Set.has, 20 elements	111400216.0 Ops/sec
Array to Set + Set.has, 10 000 elements	1195253.4 Ops/sec
Array to Set + Set.has x 1000, 20 elements	85031.2 Ops/sec
Array.includes x 1000, 20 elements	9160.9 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 JSON focuses on comparing the performance of two approaches to check for the existence of elements in an array with a limited size (20 elements). The two main methods compared are `Array.includes()` and `Set.has()`, taking into account both direct checks and usage in loops.

### Comparison of Options:

1. **`Array.includes()`**
   - **Description**: The `includes` method checks if an array contains a certain value, returning `true` or `false`.
   - **Pros**:
     - Simple and straightforward syntax.
     - Easily understandable for any developer familiar with arrays.
   - **Cons**:
     - Performance can degrade as the size of the array increases because it performs a linear search (O(n) complexity), which means it needs to check each element until it finds the target or exhausts the array.
  
2. **`Set.has()`**
   - **Description**: The `has` method is used with the `Set` object, which stores unique values and is optimized for fast lookups.
   - **Pros**:
     - Faster lookup times compared to `Array.includes()`, especially as the size of the dataset increases, thanks to its underlying data structure, which allows for average-case constant time complexity (O(1)).
     - Suitable for scenarios where duplicates are not allowed.
   - **Cons**:
     - Slightly more overhead in terms of setup since a `Set` must be created from the array before using `has` (though this is negligible in small data sizes).
     - The syntax may be less familiar to those who primarily work with arrays.

### Detailed Benchmark Cases:

1. **Direct Comparison**:
   - **Test Case 1**: `array_small.includes(getRandomTargetElement(20));` 
     * 20 elements checked directly using `includes`.
   - **Test Case 2**: `set_small.has(getRandomTargetElement(20));`
     * 20 elements checked using `Set.has()`.
   - **Results**: This provides a fundamental comparison on how each method performs with the same number of elements.

2. **Set Usage and Scaling**:
   - **Test Case 3**: `const target = getRandomTargetElement(10000); const set = new Set(array_small); set.has(target);`
     * This case exemplifies the time taken to instantiate a `Set` from a 20-element array and check for a target item drawn from a pool of 10,000.
   - **Test Case 4**: Involves using a Set in a loop for several checks: `for (let i = 0; i < 1000; i++) { const target = getRandomTargetElement(20); set.has(target); }`
     * Demonstrates performance when executing a repeated check using `Set.has()`.
   - **Test Case 5**: Similarly, checks `Array.includes()` in a loop: `for (let i = 0; i < 1000; i++) { const target = getRandomTargetElement(20); array_small.includes(target); }`
     * Compares repeated checks with both methods under similar conditions.

### Results Observations:
- The results showed that `Array.includes()` performed better for single checks with small arrays, but as repetition and larger element scopes were introduced, `Set.has()` exhibited better performance due to its optimized lookup capacity.
- Specific execution rates per second indicated that `Set.has()` could handle the checks more efficiently, validating its advantages in a practical use case.

### Considerations:
- **Memory Usage**: While `Set` may be slightly less memory-efficient due to storing unique elements and the overhead of the data structure, its performance benefits can outweigh those costs when dealing with larger datasets.
- **Use Case**: When working with small datasets and infrequent lookups, `Array.includes()` may suffice. However, for larger datasets or frequent lookups, `Set.has()` shines.

### Alternatives:
Apart from these methods, developers could also utilize:
- Native looping constructs such as `for...of` or `forEach` in array operations, though these will not typically match the performance of `Set.has()` for lookups.
- Libraries such as Lodash, which offer utility functions for arrays and collections, including more complex data structures optimized for fast lookups, such as maps or specialized sets.
- Other data structures like `Map` for key-value pair lookups can also serve as alternatives when additional data representation is required.

Related benchmarks:

Array.includes() vs Set.has() for small Arrays invoked many times (version: 1)

Comparing performance of: Array.includes, 20 elements vs Set.has, 20 elements vs Array to Set + Set.has, 10 000 elements vs Array to Set + Set.has x 1000, 20 elements vs Array.includes x 1000, 20 elements

Created: one month ago by: Guest

Jump to the latest result

Array.includes, 20 elements

Set.has, 20 elements

Array to Set + Set.has, 10 000 elements

Array to Set + Set.has x 1000, 20 elements

Array.includes x 1000, 20 elements

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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