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

HTML Preparation code:

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

Tests:

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

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: one month ago)

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

Browser/OS: Firefox 148 on Linux

View result in a separate tab

Test name	Executions per second
for-loop	56883016.0 Ops/sec
for..of	24093862.0 Ops/sec
Array.find()	92744128.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark being tested.

**Benchmark Overview**

The test measures the performance difference between three approaches:

1. **Traditional for loop**: This approach uses an explicit loop to iterate over the array, checking each element individually.
2. **for...of loop**: This is a newer, more concise syntax introduced in ECMAScript 2015 (ES6) that allows iterating directly over arrays without the need for indexes.
3. **Array.find()**: A method on the Array prototype that returns the first element that satisfies the provided callback function.

**Options Comparison**

Here's a brief comparison of the three approaches:

* **Traditional for loop**: This approach is straightforward but can be verbose and error-prone. It requires manual index management, which can lead to off-by-one errors.
* **for...of loop**: This syntax is more concise and expressive, making it easier to read and write. However, it may not be as performance-friendly as traditional for loops since the engine needs to perform additional checks to ensure the iteration is correct.
* **Array.find()**: This method provides a convenient way to find the first matching element without manual loop management. It can be less efficient than traditional for loops or for...of loops, especially when dealing with large arrays.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Traditional for loop**:
	+ Pros: Well-established, easy to understand, and performance-friendly.
	+ Cons: Verbose, error-prone, and may not be as concise.
* **for...of loop**:
	+ Pros: Concise, expressive, and easier to read/write.
	+ Cons: May not be as performance-friendly due to additional checks required for iteration.
* **Array.find()**:
	+ Pros: Convenient, concise, and easy to use.
	+ Cons: Less efficient than traditional for loops or for...of loops.

**Library Use**

None of the test cases explicitly uses a library. However, some browsers may provide built-in optimizations or features that can affect performance (e.g., Just-In-Time compilation or caching).

**Special JS Feature/Syntax**

* **for...of loop**: Introduced in ES6 as a concise syntax for iterating over arrays.
* **Array.find()**: A method on the Array prototype introduced in ECMAScript 2012.

**Alternative Approaches**

Some alternative approaches to consider:

* Using `forEach()` instead of traditional for loops or for...of loops. While not as performance-friendly, it can be a more concise way to iterate over arrays.
* Implementing custom iteration using `requestIdleCallback()` or other mechanisms that can bypass the normal JavaScript event loop.
* Utilizing WebAssembly or other low-level optimization techniques to achieve better performance.

Keep in mind that these alternatives may come with their own set of challenges and trade-offs.

Related benchmarks:

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

Testing the difference between native loops and find()

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

Created: 7 years ago by: Guest

Jump to the latest result

for-loop

for..of

Array.find()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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