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

HTML Preparation code:

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

Script Preparation code:

var arr = [
  {text: "foo"},
  {text: "bar"},
  {text: "baz"},
];

Tests:

for-loop
let val; for(var i=0; i<arr.length; i++){ var value = arr[i]; if (value.text === 'baz') { val = value; break; } }
for..of
let val; for (var value of arr) { if (value.text === 'baz') { val = value; break; } }
Array.find()
let val = arr.find(node => node.text === 'baz');
reverse for
let val; for(var i=arr.length-1; i>-1; i--){ var value = arr[i]; if (value.text === 'b') { val = value; break; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Linux

View result in a separate tab

Test name	Executions per second
for-loop	94802936.0 Ops/sec
for..of	32459766.0 Ops/sec
Array.find()	183797840.0 Ops/sec
reverse for	86085656.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The provided benchmark tests evaluate the performance of different JavaScript methods for searching through an array of objects. Specifically, it compares the following approaches:

1. **Traditional for-loop**
2. **for...of loop**
3. **Array.find() method**
4. **Reverse for-loop**

### Comparison of Options

1. **Traditional for-loop**
   ```javascript
   let val;
   for(var i=0; i<arr.length; i++){
     var value = arr[i];
     if (value.text === 'baz') {
       val = value;
       break;
     }
   }
   ```
   - **Pros**: 
     - General efficiency; can be well-optimized by the JavaScript engine.
     - Offers full control over the iteration, which can be beneficial for complex logic.
   - **Cons**: 
     - More verbose than newer syntax options.
     - Handles manual index management which can lead to errors if not careful.

2. **for...of loop**
   ```javascript
   let val;
   for (var value of arr) {
     if (value.text === 'baz') {
       val = value;
       break;
     }
   }
   ```
   - **Pros**: 
     - Cleaner and more readable syntax compared to traditional loops.
     - Allows for easy iteration over iterable objects, including arrays.
   - **Cons**: 
     - May have a slight performance overhead compared to a well-optimized traditional for-loop, though this is often negligible.

3. **Array.find() method**
   ```javascript
   let val = arr.find(node => node.text === 'baz');
   ```
   - **Pros**: 
     - Very concise and expresses intent clearly; easy to understand with functional programming patterns.
     - Returns the first element that satisfies the provided testing function, or `undefined` if no value satisfies it.
   - **Cons**: 
     - Slightly less efficient due to abstraction overhead compared to explicit iteration methods (though modern engines optimize this well).

4. **Reverse for-loop**
   ```javascript
   let val;
   for(var i=arr.length-1; i>-1; i--){
     var value = arr[i];
     if (value.text === 'baz') {
       val = value;
       break;
     }
   }
   ```
   - **Pros**: 
     - Iterating backwards can be useful in specific scenarios (e.g., modifying the array during iteration).
     - In some cases, may provide performance benefits if the searched element is more likely towards the end of the array.
   - **Cons**: 
     - More complex to understand for some developers compared to forward iterations.
     - Might not always be necessary for typical searching tasks.

### Benchmark Results Overview

From the benchmark results, the performance metrics (Executions Per Second) indicate the following:

- **Array.find()**: Fastest at 106,961,728 executions per second.
- **for...of**: Close second at 100,163,632 executions per second.
- **Reverse for-loop**: 83,700,032 executions per second.
- **for-loop**: Lowest at 75,021,128 executions per second.

### Conclusions

- The **Array.find()** method is the most performant solution in this benchmark, leading likely due to its optimization in modern JavaScript engines for common use cases like searches.
- The **for...of** loop performs almost as well but may be slightly less efficient in specific iterations than `Array.find()`.
- The traditional **for-loop** and **reverse for-loop** showed lower performance, likely due to more verbosity and overhead related to manual indexing.

### Alternatives

Other alternatives could include:

- **forEach()** method: This provides a functional approach similar to `Array.find()`, but it's generally less performant as it does not handle early termination (i.e., a `break` statement isn't possible).
  
- **Map and Filter methods**: These can be used for transforming arrays and operating on elements but do not serve the search intent directly and may result in unnecessary overhead.

In practice, the choice of approach often depends on the specific use case, the performance requirements, and consideration of readability and maintainability of the code.

Related benchmarks:

find() vs for...of vs for-loop vs reverse-for (version: 1)

Testing the difference between native loops and find()

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

Created: one month ago by: Guest

Jump to the latest result

for-loop

for..of

Array.find()

reverse for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):