Benchmark: javascript includes vs indexOf

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('orange');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
includes
indexof

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
includes	54557008.0 Ops/sec
indexof	50002332.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you are examining compares two methods for determining the presence of an element within an array in JavaScript: `Array.prototype.includes()` and `Array.prototype.indexOf()`.

### Comparison of Options

1. **`Array.prototype.includes()`**:
   - **Test Name**: `includes`
   - **Benchmark Definition**: `fruits.includes('banana');`
   - **Purpose**: This method checks if the given value exists in the array and returns `true` if found, otherwise `false`. It is particularly useful for readability, as the intention of checking for existence is clear from the method name itself.

2. **`Array.prototype.indexOf()`**:
   - **Test Name**: `indexof`
   - **Benchmark Definition**: `fruits.indexOf('orange');`
   - **Purpose**: This method returns the index of the first occurrence of a specified value in the array, or `-1` if it is not found. While `indexOf()` can achieve the same goal as `includes()` by checking for a return value of `-1`, it is not as semantically clear for checking existence.

### Performance Results

From the benchmark results:
- The `includes` method achieved **93,520,256 Executions Per Second**.
- The `indexOf` method achieved **76,465,608 Executions Per Second**.

### Pros and Cons

#### `includes()`
- **Pros**:
  - **Clarity**: The method's name clearly indicates its purpose.
  - **Boolean Return**: Directly returns a boolean, which can simplify conditional statements.
- **Cons**:
  - **Performance**: In this case, `includes()` is faster, but there might be rare scenarios where older engines or implementations could see differing performance.

#### `indexOf()`
- **Pros**:
  - **Older Method**: Has been in JavaScript since ES5, making it compatible with older environments and browsers.
  - **Return Index**: Can provide the index of the element, which can be useful in certain situations where that information is required.
- **Cons**:
  - **Ambiguity**: Requires handling `-1` for checks, which can lead to less readable code.
  - **Less Direct**: The use case for checking presence is less direct compared to `includes()`.

### Other Considerations

- **Readability vs. Performance**: While `includes()` shows better performance in this benchmark, the clarity it brings often makes it the preferred choice in modern JavaScript applications. Performance can be a significant factor in tightly looped operations or performance-critical sections.
  
- **Polyfills**: For coding in environments that do not support ES6, developers may need polyfills for `includes()` to bring compatibility, whereas `indexOf()` remains widely supported.

### Alternatives

1. **Using a Set**: If you often need to check for membership, considering a `Set` might be advantageous. Creating a `Set` from an array allows for O(1) average time complexity for lookups, but it does come at the cost of increased memory usage.

2. **For Loop**: Manual iteration over the array with a `for` loop to find a value can be a last resort. While this provides maximum flexibility (like breaking early), it typically results in less readable and more error-prone code.

3. **Higher-Order Functions**: Methods like `Array.prototype.some()` can check for existence by running a function on each element, which can be more readable in more complex conditions, but may sacrifice performance as compared to direct methods.

By comparing `includes()` and `indexOf()`, developers can choose which method better fits their needs based on the context of the application and the importance of performance versus readability.

Related benchmarks:

javascript includes vs indexOf (version: 1)

javascript includes vs indexOf

Comparing performance of: includes vs indexof

Created: one year ago by: Guest

Jump to the latest result

includes

indexof

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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