Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for of vs for loops
(version: 1)
Comparing performance of:
for-of vs for-index
Created:
one year ago
by:
Registered User
Jump to the latest result
Script Preparation code:
const planes = new Array(1_000_000).fill(2);
Tests:
for-of
for (const plane of planes) { Math.sqrt(plane); }
for-index
for (let i = 0; i < planes.length; i++) { const plane = planes[i]; Math.sqrt(plane); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
for-of
for-index
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/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Browser/OS:
Chrome 144 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
for-of
193.4 Ops/sec
for-index
190.5 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The provided benchmark is designed to compare the performance of two different loops in JavaScript: the `for-of` loop and the traditional `for` loop (also known as the indexed `for` loop). ### Benchmark Overview **Name:** for of vs for loops **Script Preparation Code:** ```javascript const planes = new Array(1_000_000).fill(2); ``` This prepares an array named `planes` with 1,000,000 elements, all of which are set to `2`. This setup allows both types of loops to iterate over a large data set, providing a meaningful comparison of their performance. ### Individual Test Cases 1. **for-of Loop** - **Benchmark Definition:** ```javascript for (const plane of planes) { Math.sqrt(plane); } ``` - **Test Name:** for-of 2. **Indexed for Loop** - **Benchmark Definition:** ```javascript for (let i = 0; i < planes.length; i++) { const plane = planes[i]; Math.sqrt(plane); } ``` - **Test Name:** for-index ### Performance Comparison The key metrics to analyze from the benchmark results are the "Executions Per Second" for both loops. - **for-index** - **Executions Per Second:** 302.27 - This indexed loop is executed approximately 302 times in one second. - **for-of** - **Executions Per Second:** 171.22 - This `for-of` loop is executed approximately 171 times in one second. ### Pros and Cons #### for-of Loop - **Pros:** - Cleaner and more readable syntax, especially with regard to the iteration over the elements, making it easier for developers to understand the code intent. - Automatically manages the iteration for iterable objects like arrays without needing an index. - **Cons:** - Generally slower than traditional indexed loops in performance benchmarks, as seen in this case. - Slightly less control over loop iteration compared to indexed loops (e.g., you can't easily skip indices). #### Indexed for Loop - **Pros:** - Tends to be faster and more efficient in terms of performance for accessing elements in large arrays, as seen by its higher execution rate. - Offers more control, allowing developers to manipulate the index freely (e.g., skipping elements, iterating in reverse). - **Cons:** - Can be less readable, particularly in complex scenarios, as it can introduce a level of verbosity in the code. - Requires manual management of the index variable. ### Other Alternatives 1. **forEach Method** - Based on functional programming, `Array.prototype.forEach` can be an alternative to both loops. It's readable but generally slower than the traditional `for` loop. - Example: ```javascript planes.forEach(plane => Math.sqrt(plane)); ``` 2. **map Method** - If transformation of the array is needed, `Array.prototype.map` can be used. It creates a new array based on the return value from a provided function. - Example: ```javascript const results = planes.map(plane => Math.sqrt(plane)); ``` - This is less about performance comparison but is a useful way of processing arrays in functional programming. ### Considerations When choosing between these approaches, developers should consider both performance needs and code readability. The indexed loop may be preferred in performance-critical applications, while the `for-of` loop offers cleaner syntax for scenarios where performance is less of a concern. In more complex applications, understanding the context in which these loops are used (size of the dataset, readability, scope of variables, etc.) is vital to make the best choice tailored to specific needs.
Related benchmarks:
for vs for in vs for each vs for of
for vs for of vs for in
traditional for loop vs for ... of
for loops and stuff
JS array for test
TestArrayAllocationsAndFilling
TestArrayAllocation
TestArrayAllocationv2
Array.from vs Array.fill (zeroes)
Comments
Confirm delete:
Do you really want to delete benchmark?