Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for of vs for loops 10k
(version: 1)
Comparing performance of:
for-of vs for-index
Created:
one year ago
by:
Registered User
Go to the latest result
Script Preparation code:
const planes = new Array(10_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:
8 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Browser/OS:
Chrome 142 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=621043" width="100%" height="500px"></iframe>
for-of
101K/s
for-index
72K/s
View exact numbers
Test name
Executions per second
✓
for-of
101,192 Ops/sec
for-index
72,029 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
In the provided benchmark, we are comparing two different types of loops in JavaScript: the `for-of` loop and the traditional `for` loop with an index. The benchmark measures how quickly each of these loops can perform the operation of calculating the square root of numbers stored in an array of 10,000 elements, all initialized to the value 2. ### Options Compared 1. **For-of Loop**: - **Code**: ```javascript for (const plane of planes) { Math.sqrt(plane); } ``` - **Test Name**: "for-of" - **Description**: The `for-of` loop is a modern JavaScript feature that allows iteration over iterable objects like arrays, strings, and other collections. It provides a simple syntax and ensures that each element is assigned directly to the loop variable (`plane` in this case). 2. **For-Index Loop**: - **Code**: ```javascript for (let i = 0; i < planes.length; i++) { const plane = planes[i]; Math.sqrt(plane); } ``` - **Test Name**: "for-index" - **Description**: The traditional `for` loop uses an index (`i`) to iterate over the array. It accesses each element by its position, which gives the programmer more control over the index but requires explicitly managing the index variable and accessing the array. ### Performance Results The benchmark results show the performance of each loop type in terms of executions per second: - **For-index**: 77,545.48 executions per second - **For-of**: 14,032.85 executions per second The `for-index` loop significantly outperforms the `for-of` loop in this case. ### Pros and Cons #### For-of Loop - **Pros**: - Cleaner and more readable syntax, which is easier to understand, especially for those new to JavaScript. - Automatically handles the iteration without needing to manage the index manually. - Less risk of errors related to off-by-one mistakes in index handling. - **Cons**: - Can be less performant as shown in this benchmark, particularly in large datasets or performance-critical applications. - Limited to iterables; cannot be used to iterate over objects directly without additional methods. #### For-Index Loop - **Pros**: - Generally offers better performance, particularly with larger arrays, as indicated by the benchmark results. - More control over the loop variable and the ability to manipulate the counter (e.g., skipping elements). - **Cons**: - More verbose syntax and potential for mistakes if the bounds of the loop are improperly set (i.e., off-by-one errors). - Requires manual handling of array access, which could lead to less readable code in complex scenarios. ### Other Considerations - **Readability vs. Performance**: When choosing between loop types, it’s important to consider the context. If performance is critical (as in this benchmark), the `for-index` loop may be the better choice. For simpler scripts or when readability is a priority, the `for-of` loop might be preferred. - **Alternatives**: Other looping constructs like `forEach`, `map`, or built-in functional methods (e.g., `reduce`) can also be used for similar operations. While these methods can simplify code for specific use cases, they may come with their own performance trade-offs. In summary, this benchmark illustrates a fundamental trade-off between readability and performance when choosing loop constructs in JavaScript. Each loop type has its place depending on the specific requirements and context of the code being written.
Related benchmarks
for vs for of vs for in
for of vs for loops
for of vs for loops 1k
Comments
Confirm delete:
Do you really want to delete benchmark?