Benchmark: indexOf vs includes 1

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var arr = new Array(15000);
arr.fill({ id: 0 });
arr = arr.map((el, idx) => el.id = idx);
var foo = Math.floor(Math.random() * 15000);

Tests:

indexOf
var hasElem = ~arr.indexOf(foo);
includes
var hasElem = arr.includes(foo);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
indexOf
includes

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
indexOf	1615021.6 Ops/sec
includes	1622461.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON is a performance comparison between two methods of checking for the existence of an element in an array in JavaScript: `indexOf` versus `includes`.

### Overview of the Methods Being Compared
1. **indexOf**:
   - **Usage**: `var hasElem = ~arr.indexOf(foo);`
   - **Functionality**: `indexOf` searches an array for a specified element and returns the first index at which it can be found, or -1 if it is not present. The use of the bitwise NOT operator (`~`) is employed here to convert the index result into a boolean (true if an index of 0 or greater is returned, false otherwise).
   - **Pros**: 
     - Supported in older browsers (since ECMAScript 5).
     - Can return the position of the element, which can be useful for certain applications.
   - **Cons**: 
     - Less readable when negating the index result for boolean checks.
     - Does not offer a built-in way to check for strict equality for objects or arrays, as it checks based on the reference (same object) for objects.

2. **includes**:
   - **Usage**: `var hasElem = arr.includes(foo);`
   - **Functionality**: `includes` checks if an array contains a certain value among its entries, returning `true` or `false` as appropriate.
   - **Pros**:
     - More readable and intuitive for checking the presence of an element.
     - Handles `NaN` checks correctly as compared to `indexOf`.
     - Can directly return a boolean without needing additional operations.
   - **Cons**:
     - Not available in older browsers (pre-ES6), so compatibility might be an issue in those environments. However, it is widely supported in modern browsers.

### Benchmark Results
The benchmark results indicate that during execution:
- The `includes` method achieved **1,622,461** executions per second.
- The `indexOf` method achieved **1,615,021** executions per second.

This shows that `includes` performed slightly better than `indexOf` in this specific test scenario.

### Notable Considerations
- **Performance**: While the difference in performance per second is marginal, it could become significant in scenarios where array checks occur numerous times, like in loops or large datasets.
- **Browser Compatibility**: If the target environment needs to support older browsers, developers may need to choose `indexOf` due to its broader support. Conversely, modern applications can leverage the more readable and often more performant `includes`.
- **Use Cases**: When the required functionality is simply checking for existence, `includes` is more concise. However, if the index or position is needed for further processing, `indexOf` might still be the better option.

### Alternatives
1. **Using a Set**: For large datasets where frequent checks are needed, a `Set` can provide faster lookups, as checking for existence in a `Set` is generally O(1) compared to O(n) for array methods.
   ```javascript
   const mySet = new Set(arr);
   const hasElem = mySet.has(foo);
   ```

2. **Other Libraries**: Libraries like Lodash also offer utility functions that can abstract these checks (`_.includes()`), providing additional options for more complex data structures.

3. **Manual Iteration**: Although not recommended for performance-sensitive applications, a `for` loop or `forEach` could be used for custom checks, allowing for tailored behavior at the cost of performance.

In summary, while the `includes` method has a slight edge in performance and readability, developers must consider browser compatibility and the specific use case before choosing which method to use.

Related benchmarks:

indexOf vs includes 1 (version: 1)

Comparing performance of: indexOf vs includes

Created: 10 months ago by: Guest

Jump to the latest result

indexOf

includes

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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