Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for...in vs for...of vs for-loop
(version: 0)
Testing the difference between native loops and find()
Comparing performance of:
for-loop vs for..of vs for..in
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='test'></div>
Tests:
for-loop
var arr = ['hello', 'a', 'b']; let val; for(i=0; i<arr.length; i++){ var value = arr[i]; if (value === 'b') { val = value; break; } }
for..of
var arr = ['hello', 'a', 'b']; let val; for (var value of arr) { if (value === 'b') { val = value; break; } }
for..in
var arr = ['hello', 'a', 'b']; let val; for (var value in arr) { if (value === 2) { val = value; break; } }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
for-loop
for..of
for..in
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Browser/OS:
Chrome 124 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=519929" width="100%" height="500px"></iframe>
for..of
111.0M/s
for-loop
103.2M/s
for..in
10.5M/s
View exact numbers
Test name
Executions per second
✓
for..of
110,971,312 Ops/sec
for-loop
103,248,296 Ops/sec
for..in
10,518,757 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided benchmark. **Benchmark Purpose** The goal of this benchmark is to compare the performance of three different loop types: 1. **Traditional for-loop** (also known as a "manual" or " index-based" loop): This type of loop uses an explicit counter variable (`i`) to iterate over an array. 2. **For-of loop**: This type of loop uses the `for...of` syntax to iterate over an array, where the value of each iteration is stored in the variable specified after the `of` keyword. 3. **For-in loop**: This type of loop uses the `for...in` syntax to iterate over an object (or array in older browsers), where the property name of each iteration is stored in the variable specified after the `in` keyword. **Options Compared** The benchmark compares the performance of these three loop types: * **Traditional for-loop**: Iterates over an array using a manual counter variable (`i`) and checks for specific conditions. * **For-of loop**: Iterates over an array using the `for...of` syntax, which is designed to be more concise and expressive than traditional loops. * **For-in loop**: Iterates over an object (or array) using the `for...in` syntax, which may not be suitable for arrays. **Pros and Cons of Each Approach** Here are some general pros and cons of each approach: * **Traditional for-loop**: + Pros: More control over iteration, easy to implement. + Cons: Can be verbose, prone to off-by-one errors. * **For-of loop**: + Pros: Concise and expressive syntax, less error-prone than traditional loops. + Cons: May not work as expected for arrays (which are technically objects), more complex setup required. * **For-in loop**: + Pros: Works well with objects, easy to use when working with existing object APIs. + Cons: Not suitable for arrays, can lead to unexpected behavior if used with arrays. **Library/Functionality Used** None mentioned in the provided benchmark definition. However, it's worth noting that some browsers and engines may have specific optimizations or quirks related to these loop types. **Special JavaScript Features/Syntax** * **For-of loop**: Introduced in ECMAScript 2015 (ES6), this syntax allows for concise iteration over arrays. * **For-in loop**: Also introduced in ES6, this syntax is designed for iterating over objects. **Other Alternatives** If you need to compare performance of other loop types or variations on these loops, you might consider exploring: * **While loops** * **Recursive loops** * **Map(), Filter(), and Reduce() methods**, which can be used to iterate over arrays in a more functional programming style. * **Async/await syntax** for asynchronous iteration. Keep in mind that the choice of loop type or method ultimately depends on the specific requirements and constraints of your project.
Related benchmarks
foreach vs for vs for in
foreach vs for..of
for vs foreach vs for..of vs for..of over entries (const)
foreach vs for...of
Comments
Confirm delete:
Do you really want to delete benchmark?