Benchmark: find() vs for...of vs for-loop more data

HTML Preparation code:

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

Script Preparation code:

var arr = [];

for (let i = 0; i < 100; i++) {
	arr.push(i);
}

Tests:

for-loop
let val; for(i=0; i<arr.length; i++){ var value = arr[i]; if (value === 98) { val = value; break; } }
for..of
let val; for (var value of arr) { if (value === 98) { val = value; break; } }
Array.find()
let val = arr.find(node => node.id === 98);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0

Browser/OS: Firefox 102 on Linux

View result in a separate tab

Test name	Executions per second
for-loop	227461.6 Ops/sec
for..of	709191.5 Ops/sec
Array.find()	4273374.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Overview**

The benchmark compares three different approaches to find an element in an array:

1. **Native for-loop**: A traditional for loop that iterates over the array using an index variable `i`.
2. **for...of**: A newer iteration of the for loop, introduced in ECMAScript 2015 (ES6), which uses a more modern syntax to iterate over arrays.
3. **Array.find()**: A method on the Array prototype that searches for an element that satisfies a provided callback function.

**Options being compared**

The benchmark is testing which approach is faster and more efficient in terms of executions per second.

**Pros and Cons of each approach:**

1. **Native for-loop**:
	* Pros: Wide support across older browsers, easy to understand and implement.
	* Cons: Can be slower than other approaches due to manual indexing and loop control.
2. **for...of**:
	* Pros: More modern syntax, easier to read and maintain, and can be faster in some cases.
	* Cons: May not work as expected in older browsers that don't support it.
3. **Array.find()**:
	* Pros: Elegant syntax, easy to implement, and can be faster than traditional loops due to optimized implementation.
	* Cons: May not work as expected if the array is very large or if the callback function returns multiple values.

**Library usage**

None of the benchmark tests use any external libraries. However, the `Array.find()` method is a built-in method on the Array prototype, which means it's implemented by the browser itself and doesn't rely on any external libraries.

**Special JavaScript features or syntax**

The only special feature used in this benchmark is the `for...of` loop, which was introduced in ECMAScript 2015 (ES6). This loop uses a more modern syntax to iterate over arrays and can be faster and more efficient than traditional for loops.

**Other alternatives**

If you wanted to compare other approaches to find an element in an array, some examples include:

* Using `forEach()` method with a callback function
* Using the `filter()` method followed by `indexOf()`
* Using a regular expression search

However, these approaches may not be as efficient or elegant as the native for-loop or `Array.find()` methods used in this benchmark.

Related benchmarks:

find() vs for...of vs for-loop more data (version: 0)

Testing the difference between native loops and find()

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

Created: 2 years ago by: Guest

Jump to the latest result

for-loop

for..of

Array.find()

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):