Benchmark: find() vs indexOf() vs for...of vs for-loop - bigger array

find() vs indexOf() vs for...of vs for-loop - bigger array (version: 8)

Testing the difference between native loops and find() with a bigger array of 10,001 elements :) Fixed bug in the original test forked from: https://www.measurethat.net/Benchmarks/Show/4261/0/find-vs-forof-vs-for-loop (node.id is undefined in find() test)

Comparing performance of: `for-loop vs for..of vs Array.find() vs indexOf`

Created: 4 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

var arr = [...Array(10000).keys()];
arr.push('b');

Tests:

for-loop
for(let i=0; i<arr.length; i++){ const value = arr[i]; if (value === 'b') { return value; } }
for..of
for (const value of arr) { if (value === 'b') { return value; } }
Array.find()
return arr.find(node => node === 'b');
indexOf
return arr[arr.indexOf('b')];

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

indexOf

195K/s

for..of

45K/s

for-loop

21K/s

Array.find()

20K/s

Fastest: indexOf (9.8x faster)

View exact numbers

✓ indexOf: 194,948 ops/sec
• for..of: 44,894 ops/sec
• for-loop: 20,860 ops/sec
• Array.find(): 19,831 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for-loop
for..of
Array.find()
indexOf

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

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

Browser/OS: Chrome 150 on Windows

View result in a separate tab

indexOf

195K/s

for..of

50K/s

for-loop

28K/s

Array.find()

20K/s

View exact numbers

Test name	Executions per second
✓ indexOf	194,973 Ops/sec
for..of	49,662 Ops/sec
for-loop	27,841 Ops/sec
Array.find()	19,831 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark compares the performance of four different approaches: `for` loop, `for...of` loop, `Array.find()`, and `indexOf()`.

**Benchmark Definition JSON**

The benchmark definition JSON contains information about the test case:

* `Name`: The name of the benchmark ("find() vs indexOf() vs for...of vs for-loop - bigger array")
* `Description`: A brief description of the test case
* `Script Preparation Code`: A code snippet that initializes an array with 10,001 elements and pushes a string value "b" onto it.
* `Html Preparation Code`: An HTML snippet that creates a `<div>` element to display the results

**Individual Test Cases**

Each test case is represented by a separate JSON object:

1. **`for-loop`**
	* `Benchmark Definition`: A code snippet that uses a traditional `for` loop to find the value "b" in the array.
2. **`for...of`**
	* `Benchmark Definition`: A code snippet that uses an `for...of` loop to iterate over the array and find the value "b".
3. **`Array.find()`**
	* `Benchmark Definition`: A code snippet that uses the `Array.prototype.find()` method to find the value "b" in the array.
4. **`indexOf()`**
	* `Benchmark Definition`: A code snippet that uses the `indexOf()` method to find the index of the value "b" in the array.

**Library: Array.prototype.find()**

The `Array.prototype.find()` method is a part of the JavaScript standard library and returns the first element in an array that satisfies the provided testing function. In this benchmark, it is used to find the value "b" in the array.

**Special JS Feature/Syntax**

None mentioned explicitly in this benchmark.

**Options Compared**

The benchmark compares four different approaches:

* `for` loop: A traditional loop that iterates over an array using an index.
* `for...of` loop: An iterator-based loop that iterates over an array using a value.
* `Array.find()`: A method that returns the first element in an array that satisfies a testing function.
* `indexOf()` : A method that returns the index of the first occurrence of a value.

**Pros and Cons**

Here's a brief summary:

1. **`for-loop`**:
	* Pros: Simple, efficient for small arrays.
	* Cons: Can be slow for large arrays due to indexing calculations.
2. **`for...of` loop**:
	* Pros: More concise, can handle iterators and large datasets efficiently.
	* Cons: May not be supported in older browsers or environments.
3. **`Array.find()`**:
	* Pros: Concise, efficient for finding the first matching element.
	* Cons: May not be supported in older browsers or environments.
4. **`indexOf()`**:
	* Pros: Simple, widely supported.
	* Cons: May not be optimized for large arrays.

**Other Considerations**

When choosing an approach, consider:

* Array size and complexity
* Browser support
* Readability and maintainability of code

In this benchmark, the results show that `for...of` loop is generally faster than other approaches for finding a single element in an array. However, the choice of approach depends on specific use cases and performance requirements.

find() vs indexOf() vs for...of vs for-loop - bigger array (version: 8)

Testing the difference between native loops and find() with a bigger array of 10,001 elements :) Fixed bug in the original test forked from: https://www.measurethat.net/Benchmarks/Show/4261/0/find-vs-forof-vs-for-loop (node.id is undefined in find() test)

Comparing performance of: for-loop vs for..of vs Array.find() vs indexOf

Created: 4 years ago by: Registered User

Go to the latest result

for-loop

for..of

Array.find()

indexOf

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `for-loop vs for..of vs Array.find() vs indexOf`