Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
find() vs for...of vs for-loop with large arrays
(version: 0)
Testing the difference between native loops and find() in large arrays
Comparing performance of:
for-loop vs for..of vs Array.find()
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id='test'></div>
Tests:
for-loop
var arr = new Array(2000000).fill('a'); arr.push('b'); //set b as last element let val; for(i=0; i<arr.length; i++){ var value = arr[i]; if (value === 'b') { val = value; break; } }
for..of
var arr = new Array(2000000).fill('a'); arr.push('b'); //set b as last element let val; for (var value of arr) { if (value === 'b') { val = value; break; } }
Array.find()
var arr = new Array(2000000).fill('a'); arr.push('b'); //set b as last element let val = arr.find(e => e === '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:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** The provided JSON represents three individual test cases that compare the performance of different approaches for finding an element in a large array: `for-loop`, `Array.find()`, and `for...of`. The test aims to measure which approach is the most efficient. **Options compared:** 1. **For-loop**: A traditional, manual loop using `var i` and `arr[i]`. 2. **Array.find()**: A method introduced in ECMAScript 2019 that allows finding an element in an array by providing a callback function. 3. **For...of**: A newer iteration of the `for` loop syntax that allows iterating over arrays using a more concise and expressive way. **Pros and Cons:** 1. **For-loop**: * Pros: widely supported, easy to understand, and works in older browsers. * Cons: can be slow for large datasets due to the manual index incrementation. 2. **Array.find()**: * Pros: concise, readable, and efficient for finding a single element. * Cons: requires ECMAScript 2019 support (not widely adopted), may have performance overhead for large arrays. 3. **For...of**: * Pros: concise, modern syntax, and suitable for iterating over arrays. * Cons: may not be as efficient as `for-loop` for finding a specific element due to the iteration overhead. **Library/Library purpose:** None mentioned in this benchmark definition. **Special JS feature/syntax:** The `Array.find()` method is a built-in JavaScript API introduced in ECMAScript 2019. The `For...of` loop syntax is also a modern addition, widely adopted in recent browsers and ECMAScript versions. **Other considerations:** * The test uses a large array (2 million elements) to simulate real-world performance scenarios. * The tests are run on the same browser instance (Chrome 105), minimizing potential environment variations. * The benchmark measures `ExecutionsPerSecond`, which suggests that the goal is to find the fastest approach for executing the loop. **Alternatives:** Other approaches for finding an element in a large array might include: 1. **Filter()**: Using `arr.filter()` with a callback function can be another way to achieve similar results. 2. **Reduce()**: Employing `Array.prototype.reduce()` could also be explored, although its usage might be more specialized. 3. **Splice()**: Iterating through the array using `splice()` and manual indexing might be another alternative. However, these alternatives are less commonly used or may have different performance characteristics compared to the methods tested in this benchmark.
Related benchmarks:
Array fill foreach, vs for i loop
foreach vs for..of
foreach vs for...of
for vs foreach123
Array fill vs for i loop
Comments
Confirm delete:
Do you really want to delete benchmark?