Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for (i < n) vs forEach vs for...of
(version: 0)
Comparing performance of:
forloop vs forEach vs for...of
Created:
4 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var arr = Array(1000);
Tests:
forloop
for (let i = 0; i < 1000; i++) { arr[i]; }
forEach
arr.forEach(it => { it; });
for...of
for (let it of arr) { it; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
forloop
forEach
for...of
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3 Safari/605.1.15
Browser/OS:
Safari 26 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=625708" width="100%" height="500px"></iframe>
forloop
4.2M/s
for...of
1.8M/s
forEach
94K/s
View exact numbers
Test name
Executions per second
✓
forloop
4,151,418 Ops/sec
for...of
1,839,054 Ops/sec
forEach
93,793 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark definition and results. **Benchmark Definition** The benchmark measures the performance of three different approaches to iterate over an array: 1. **for loop**: A traditional `for` loop with an index variable (`i`) that increments on each iteration. 2. **forEach**: The `forEach` method, which iterates over an array using a callback function. 3. **for...of**: The new `for...of` loop syntax, introduced in ECMAScript 2015 (ES6), which allows iterating over arrays without an index variable. **Options Compared** The three options are compared in terms of their execution time. The benchmark is designed to test the performance of each approach on a large array of 1000 elements. **Pros and Cons** Here's a brief summary of the pros and cons of each approach: * **for loop**: + Pros: Wide support across older browsers, easy to read and understand. + Cons: Requires manual index management, which can lead to errors. * **forEach**: + Pros: Simple and readable syntax, eliminates the need for manual indexing. + Cons: May have performance overhead due to callback function creation and execution. * **for...of**: + Pros: Modern, concise syntax that eliminates manual indexing. + Cons: Requires support from modern browsers (Chrome 101 in this case). **Library and Purpose** None of the benchmark cases use any external libraries or frameworks. The arrays are created directly in the JavaScript code using `Array(1000)`. **Special JS Feature/Syntax** The benchmark uses the new `for...of` loop syntax, which is a feature introduced in ECMAScript 2015 (ES6). This syntax allows iterating over arrays without the need for an index variable, making it more concise and expressive. **Other Alternatives** If you're interested in exploring other iteration methods, here are some alternatives: * **while loop**: Another traditional loop construct that can be used to iterate over arrays. * **reduce()**: An array method that reduces the elements of an array to a single value. While not exactly the same as iterating over an array, it shares similarities with for loops. * **map(), filter(), and every()**: These array methods are often used in combination with loops or conditionals to process arrays. Keep in mind that these alternatives might have different performance characteristics, readability trade-offs, or use cases compared to the three options being benchmarked.
Related benchmarks
Array loop vs for of loop vs foreach vs map (2)
Array loop vs foreach vs map with large array
Array loop vs foreach vs every
Comments
Confirm delete:
Do you really want to delete benchmark?