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
Jump 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:
2 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
Test name
Executions per second
forloop
4151418.0 Ops/sec
forEach
93793.1 Ops/sec
for...of
1839054.0 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 for_of
Array loop vs foreach vs every
Comments
Confirm delete:
Do you really want to delete benchmark?