Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
for..in vs for..of vs classic for
(version: 0)
Benchmark.js
Testing the difference between for..in vs for..of vs classic for
Comparing performance of:
classic for vs for..of vs for..in
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='test'></div>
Tests:
classic for
const arr = Array.from(Array(1000000).keys()); const odds = [] for(i=0; i<arr.length; i++){ const value = arr[i]; odds[i] = (value%2 === 0) ? 'odd' : 'even'; }
for..of
const arr = Array.from(Array(1000000).keys()); const odds = [] for (const value of arr) { odds[value] = (value%2 === 0) ? 'odd' : 'even'; }
for..in
const arr = Array.from(Array(1000000).keys()); const odds = [] for (const value in arr) { odds[value] = (value%2 === 0) ? 'odd' : 'even'; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
classic for
for..of
for..in
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0
Browser/OS:
Firefox 135 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=589467" width="100%" height="500px"></iframe>
for..of
55/s
classic for
52/s
for..in
14/s
View exact numbers
Test name
Executions per second
✓
for..of
55 Ops/sec
classic for
52 Ops/sec
for..in
14 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks. **What is being tested?** MeasureThat.net is testing three different approaches for iterating over an array: 1. **Classic `for` loop**: This uses a traditional `for` loop with an index variable (`i`) to iterate over the array. 2. **`for...of` loop**: This uses the new `for...of` loop syntax introduced in ECMAScript 2015 (ES6). It allows iterating over arrays and iterables using a single loop variable. 3. **`for...in` loop**: This uses the old `for...in` loop syntax, which was used to iterate over object properties (not arrays). **Options comparison** The three approaches differ in how they access and manipulate the array elements: * Classic `for` loop: Uses an index variable (`i`) to access array elements. + Pros: - Well-established and widely supported - Cons: - Can be error-prone due to indexing issues - Not optimized for performance in modern browsers * `for...of` loop: Uses a single loop variable to iterate over the array elements directly. + Pros: - More concise and readable than classic `for` - Optimized for performance in modern browsers + Cons: - Less flexible than classic `for` due to restrictions on indexing and manipulation * `for...in` loop: Uses a property access (using the `.in` syntax) to iterate over object properties. + Pros: - Allows accessing array elements using property names (e.g., `arr[value]`) + Cons: - Less efficient than classic `for` and `for...of` due to slower iteration - Not designed for arrays specifically, can lead to unexpected behavior **Library usage** There is no library used in this benchmark. The script only defines the array and variables. **Special JS feature or syntax** The `for...of` loop uses a new syntax introduced in ECMAScript 2015 (ES6). It allows iterating over arrays and iterables using a single loop variable, making it more concise and readable than traditional loops. **Other alternatives** If you're interested in exploring other options, here are some alternative approaches: * Using `Array.prototype.forEach()` or `Array.prototype.map()`: These methods provide a functional programming style for iterating over arrays, but might be slower due to the overhead of function calls. * Using `let` and `const` declarations with traditional loops: This approach provides better scoping and block-level variables, but might be less readable than using modern loop syntax. In conclusion, MeasureThat.net's benchmark helps you understand the performance differences between three common approaches for iterating over arrays in JavaScript. The choice of loop depends on your specific use case, personal preference, and the level of optimization required.
Related benchmarks
querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID 20x
queryall vs classname
Comments
Confirm delete:
Do you really want to delete benchmark?