Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
find() vs for...of vs for-loop v2
(version: 0)
Testing the difference between native loops and find()
Comparing performance of:
for-loop vs for..of vs Array.find()
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='test'></div>
Tests:
for-loop
var arr = ['hello', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']; 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', 'c', 'd', 'e', 'f', 'g', 'h', 'i']; let val; for (var value of arr) { if (value === 'b') { val = value; break; } }
Array.find()
var arr = ['hello', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']; let val = arr.find(node => node.id === 'b');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
for-loop
for..of
Array.find()
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
6 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36 Edg/144.0.0.0
Browser/OS:
Chrome 144 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=624759" width="100%" height="500px"></iframe>
for..of
156.4M/s
Array.find()
110.9M/s
for-loop
19.7M/s
View exact numbers
Test name
Executions per second
✓
for..of
156,358,640 Ops/sec
Array.find()
110,861,784 Ops/sec
for-loop
19,701,248 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and benchmark results to understand what is being tested. **Benchmark Overview** The "find() vs for...of vs for-loop v2" benchmark compares three different approaches for iterating over an array in JavaScript: 1. **Native Loop**: A traditional `for` loop using a counter variable (`i`) to access each element in the array. 2. **For...of Loop**: An improved iteration method introduced in ECMAScript 2015 (ES6), which allows iterating over arrays without a need for a counter variable. 3. **Array.find() Method**: A built-in method of arrays that returns the first element that satisfies a provided condition, allowing for more concise code. **Options Compared** The benchmark tests each option with different characteristics: * The array being iterated has 10 elements (not specified in the JSON but implied by the length). * The iteration is only performed when a specific value (`'b'`) is found. * No additional filtering or sorting is applied during the iteration. **Pros and Cons of Each Approach** 1. **Native Loop**: * Pros: Simple, widely supported, and easy to understand for developers familiar with traditional loops. * Cons: Can be error-prone due to the need to manage the counter variable (`i`), potentially leading to off-by-one errors or unnecessary iterations. 2. **For...of Loop**: * Pros: More concise code, reduced chance of errors (as the loop is managed automatically by the `for...of` keyword), and better suited for iterating over arrays in ES6+ codebases. * Cons: May not be as familiar to developers without experience with modern JavaScript iteration methods, potentially affecting performance due to its higher-level abstraction. 3. **Array.find() Method**: * Pros: Concise and expressive code, reducing the need for manual loop management, and efficient performance (as it leverages a native algorithm). * Cons: Less intuitive for developers unfamiliar with array methods or functional programming concepts, potentially requiring additional imports or setup. **Library Considerations** In this benchmark, no external libraries are used, only built-in JavaScript features. However, if the test cases were modified to include third-party libraries (e.g., Lodash), we'd need to consider their performance and potential impact on execution times. **Special JS Feature or Syntax Consideration** The "for...of" loop uses a modern JavaScript iteration method introduced in ECMAScript 2015 (ES6). While not explicitly stated, the benchmark assumes familiarity with this syntax. For developers without experience, it's essential to understand the differences between traditional loops and modern iteration methods. **Alternative Approaches** Other alternatives for iterating over arrays in JavaScript include: * **Array.prototype.forEach()**: A non-iterative method that executes a callback function once for each element in the array. * **Array.prototype.map()**: Transforms elements of an array by applying a provided function to each element. * **Callback functions with Array.prototype.reduce() or Array.prototype.filter()**: These methods can be used to process arrays, but may not provide the same level of iteration as traditional loops. Keep in mind that these alternatives have different use cases and performance characteristics compared to the "for...of" loop and native loop approaches.
Related benchmarks
loop vs recursion
JS forEach vs for ... of
foreach vs for..of
foreach vs for...of
For loop vs <Array>.forEach() vs for...of loop
Comments
Confirm delete:
Do you really want to delete benchmark?