Benchmark: javascript includes vs indexOf with different items

HTML Preparation code:

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

Script Preparation code:

const fruits = ['apple', 'banana', 'orange', 'grape'];

Tests:

includes
fruits.includes('banana');
indexof
fruits.indexOf('banana');
includes first item
fruits.includes('apple');
indexof first item
fruits.indexOf('apple');
includes last item
fruits.includes('grape');
indexof last item
fruits.indexOf('apple');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
includes
indexof
includes first item
indexof first item
includes last item
indexof last item

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Opera 117 on Windows

View result in a separate tab

indexof last item

127.4M/s

includes first item

127.1M/s

indexof first item

126.4M/s

includes

118.9M/s

indexof

118.2M/s

includes last item

102.6M/s

View exact numbers

Test name	Executions per second
✓ indexof last item	127,433,416 Ops/sec
includes first item	127,120,976 Ops/sec
indexof first item	126,442,648 Ops/sec
includes	118,877,912 Ops/sec
indexof	118,218,736 Ops/sec
includes last item	102,583,376 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark is designed to compare the performance of two different JavaScript methods for checking the presence of items in an array: `Array.prototype.includes()` and `Array.prototype.indexOf()`. The benchmark specifically targets a simple example with an array of fruits.

### Options Compared
1. **`fruits.includes('item')`**
   - This method checks if an item exists in the array and returns `true` or `false`.
   - Its advantage is readability and expressiveness, making it clear that you're checking for the item's existence.

2. **`fruits.indexOf('item')`**
   - This method returns the index of the item in the array or `-1` if the item is not found.
   - It has been part of JavaScript since its early versions and is widely used, but it can be somewhat less intuitive than `includes()` for the singular task of checking existence.

### Test Cases
The benchmark includes several test cases that evaluate both methods using different items from the `fruits` array:
- Basic checks: Includes and indexOf for ‘banana’.
- Edge cases: Checking the first item ('apple') for both methods.
- Another edge case: Checking the last item ('grape') for both functions.

### Pros and Cons
- **`includes()` Pros:**
  - More readable and intuitive for the specific purpose of checking existence.
  - Handles `NaN` correctly—`includes()` returns true if the value exists regardless of its type.
  
- **`includes()` Cons:**
  - Slightly less optimized for older browsers that may not support it (though this is less of a concern in modern development).

- **`indexOf()` Pros:**
  - Available in all JavaScript environments, providing broader compatibility.
  - Can be used to determine the position of an item, which is useful if additional logic needs to be applied based on where the item is located.

- **`indexOf()` Cons:**
  - Less intuitive for simply checking existence; one has to compare against `-1` to determine if an item is present.
  - In the case of complex types (objects), it uses strict equality (`===`), making it less flexible than `includes` for such scenarios.

### Performance Considerations
The benchmark results indicate that `indexOf` has outperformed `includes` in this instance, particularly for the last item, with execution rates reaching above 127 million executions per second. This suggests that performance may vary based on the method used and the specific test case.

### Alternative Methods
There are also other ways to check for an item's existence in an array in JavaScript:
- **Using `for` loops**: This is a manual approach where you iterate through the array and check each item. It provides flexibility but lacks clarity.
  
- **Using `Set` for large datasets**: If the dataset is large and needs frequent lookups, converting the array to a `Set` can provide O(1) complexity for existence checks, significantly improving performance metrics.

### Conclusion
In conclusion, the performance benchmark between `includes()` and `indexOf()` provides important insights for software engineers making decisions based on readability versus performance. It's essential to choose the method that aligns with project goals while considering the trade-offs involved. The results suggest potential performance advantages but should be evaluated in the context of specific use cases and overall application needs.

javascript includes vs indexOf with different items (version: 1)

javascript includes vs indexOf with different items

Comparing performance of: `includes vs indexof vs includes first item vs indexof first item vs includes last item vs indexof last item`

Created: one year ago by: Guest

Go to the latest result

includes

indexof

includes first item

indexof first item

includes last item

indexof last item

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

javascript includes vs indexOf with different items (version: 1)

javascript includes vs indexOf with different items

Comparing performance of: includes vs indexof vs includes first item vs indexof first item vs includes last item vs indexof last item

Created: one year ago by: Guest

Go to the latest result

includes

indexof

includes first item

indexof first item

includes last item

indexof last item

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `includes vs indexof vs includes first item vs indexof first item vs includes last item vs indexof last item`