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

Historical Performance Data aggregated from 505 community runs

Desktop Results:

Chrome 363 runs

Array.find()

108.1M/s

for..of

103.5M/s

for-loop

63.3M/s

Fastest: Array.find() (1.7x faster)

View exact numbers

✓ Array.find(): 108,082,856 ops/sec
• for..of: 103,473,024 ops/sec
• for-loop: 63,293,944 ops/sec

Firefox 85 runs

Array.find()

91.0M/s

for..of

29.7M/s

for-loop

22.3M/s

Fastest: Array.find() (4.1x faster)

View exact numbers

✓ Array.find(): 91,011,808 ops/sec
• for..of: 29,738,702 ops/sec
• for-loop: 22,328,306 ops/sec

Safari 16 runs

Array.find()

99.1M/s

for-loop

92.5M/s

for..of

72.8M/s

Fastest: Array.find() (1.4x faster)

View exact numbers

✓ Array.find(): 99,062,784 ops/sec
• for-loop: 92,513,712 ops/sec
• for..of: 72,777,504 ops/sec

Mobile Results:

Chrome 28 runs

Array.find()

78.7M/s

for..of

68.2M/s

for-loop

62.7M/s

Fastest: Array.find() (1.3x faster)

View exact numbers

✓ Array.find(): 78,709,440 ops/sec
• for..of: 68,240,576 ops/sec
• for-loop: 62,674,716 ops/sec

Firefox 7 runs

Array.find()

4.1M/s

for-loop

3.6M/s

for..of

1.6M/s

Fastest: Array.find() (2.5x faster)

View exact numbers

✓ Array.find(): 4,119,734 ops/sec
• for-loop: 3,576,678 ops/sec
• for..of: 1,638,243 ops/sec

Safari 6 runs

for-loop

68.0M/s

Array.find()

64.7M/s

for..of

61.8M/s

Fastest: for-loop (1.1x faster)

View exact numbers

✓ for-loop: 68,010,160 ops/sec
• Array.find(): 64,739,528 ops/sec
• for..of: 61,759,212 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()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

for..of

109.8M/s

Array.find()

108.7M/s

for-loop

12.6M/s

View exact numbers

Test name	Executions per second
✓ for..of	109,786,760 Ops/sec
Array.find()	108,729,584 Ops/sec
for-loop	12,627,030 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.

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

Go to the latest result

for-loop

for..of

Array.find()

Historical Performance Data aggregated from 505 community runs

Desktop Results:

Chrome 363 runs

Firefox 85 runs

Safari 16 runs

Mobile Results:

Chrome 28 runs

Firefox 7 runs

Safari 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

for-loop

for..of

Array.find()

Historical Performance Data aggregated from 505 community runs

Desktop Results:

Chrome 363 runs

Firefox 85 runs

Safari 16 runs

Mobile Results:

Chrome 28 runs

Firefox 7 runs

Safari 6 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()`