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: 2 years ago by: Registered User

Jump 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')];

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

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days 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.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Test name	Executions per second
for-loop	1247.9 Ops/sec
for..of	60053.9 Ops/sec
Array.find()	38915.1 Ops/sec
indexOf	267832.3 Ops/sec

Related benchmarks:

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: 2 years ago by: Registered User

Jump to the latest result

for-loop

for..of

Array.find()

indexOf

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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