Benchmark: Array.indexOf vs. Array.includes on integer array

Script Preparation code:

const length = 10000;
const total = length - 1;
window.available = Array.from({ length }, (_, i) => total - i);

Tests:

indexOf Start
available.indexOf(9000);
indexOf Middle
available.indexOf(5000);
indexOf End
available.indexOf(1000);
includes Start
available.includes(9000);
includes Middle
available.includes(5000);
includes End
available.includes(1000);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
indexOf Start
indexOf Middle
indexOf End
includes Start
includes Middle
includes End

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 92 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
indexOf Start	6730761.0 Ops/sec
indexOf Middle	6762775.5 Ops/sec
indexOf End	1147116.0 Ops/sec
includes Start	6689824.5 Ops/sec
includes Middle	6781656.0 Ops/sec
includes End	6791667.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Description**

The provided benchmark tests the performance difference between `Array.indexOf()` and `Array.includes()` methods when searching for an integer value in an array of integers, specifically 10000 elements long. The array is created using `Array.from()` method with a initial value of `total - i`, where `i` ranges from 0 to 9999.

**Comparison Options**

Two options are being compared:

1. **`Array.indexOf()`**: This method returns the index of the first occurrence of the specified value in the array. If the value is not found, it returns `-1`.
2. **`Array.includes()`**: This method returns `true` if the array includes the specified value, and `false` otherwise.

**Pros and Cons**

*   **`Array.indexOf()`**:
    *   Pros: More traditional approach, easier to understand for some developers.
    *   Cons: May be slower than `Array.includes()` due to the indexing operation involved.
*   **`Array.includes()`**:
    *   Pros: Faster execution time, as it uses a binary search algorithm under the hood to find the value.
    *   Cons: May have a higher memory footprint due to the additional function call.

**Library Usage**

None of the libraries are explicitly mentioned in the benchmark definition or individual test cases. However, `Array.from()` is used to create the array, which is a modern JavaScript method introduced in ECMAScript 2015 (ES6).

**Special JS Features/ Syntax**

The benchmark utilizes the `const` keyword for variable declarations, which is a part of ES6 syntax. It also uses arrow functions (`() => total - i`) and template literals (`\r\n`) for code formatting.

**Other Alternatives**

If you want to explore alternative approaches or libraries, here are some options:

*   **Other array searching methods**: You can try using `Array.prototype.findIndex()` (ES6) or the `indexOf()` method with a callback function (non-ES6).
*   **Alternative array creation methods**: Instead of using `Array.from()`, you could use `new Array(10000)` or a library like Lodash's `_.times()`.
*   **Different search algorithms**: If you want to optimize the search algorithm, consider using a more efficient data structure like a binary search tree or a hash table.

In conclusion, this benchmark provides a simple yet informative comparison of two JavaScript array searching methods. By understanding the pros and cons of each approach, developers can make informed decisions about which method to use in their own codebases.

Related benchmarks:

Array.indexOf vs. Array.includes on integer array (version: 0)

Comparing performance of: indexOf Start vs indexOf Middle vs indexOf End vs includes Start vs includes Middle vs includes End

Created: 3 years ago by: Guest

Jump to the latest result

indexOf Start

indexOf Middle

indexOf End

includes Start

includes Middle

includes End

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):