1. Introduction
The for loop is JavaScript's primary tool for repeating a block of code a known or countable number of times. It packs initialization, condition checking, and the update step into a single compact header, making it ideal for iterating over arrays by index, running a fixed number of iterations, or counting up or down.
Cricket analogy: A for loop is like bowling a fixed 6-ball over: you start at ball one (initializer), check you haven't bowled all six yet (condition), and move to the next ball after each delivery (update) -- ideal for a known, countable sequence.
Beyond the classic C-style for loop, JavaScript also provides for...in (which iterates over enumerable property keys of an object) and for...of (which iterates over the values produced by an iterable, such as an array, string, Map, or Set). Choosing the right variant for the data structure you are working with is essential to avoid subtle bugs.
Cricket analogy: for...in is like reading a scorecard's labeled fields (batsman name, runs, overs) as keys, while for...of is like walking through the actual sequence of balls bowled as values -- picking the wrong one gives you labels instead of the real action.
2. Syntax
// Classic for loop
for (let i = 0; i < array.length; i++) {
// uses array[i]
}
// for...in: iterates over enumerable property keys (indexes for arrays)
for (const key in object) {
// key is a string
}
// for...of: iterates over the values of an iterable
for (const value of iterable) {
// value is the actual element
}3. Explanation
The classic for loop has three parts separated by semicolons: an initializer (runs once), a condition (checked before every iteration), and an update expression (runs after every iteration body). Using let for the loop counter (rather than var) gives each iteration its own scoped binding, which matters when the loop variable is captured by closures such as callbacks.
Cricket analogy: The over's ball count starts once at zero (initializer), gets checked before every delivery (condition), and increments after each ball (update); using 'let' for the ball number gives each fielder's memory of that ball its own snapshot -- vital when a slow-motion replay callback later needs the exact ball number, not a stale shared one.
for...in iterates over the enumerable property keys of an object, as strings, including inherited enumerable properties. When used on an array, it iterates over the array's indexes (also as strings, e.g. '0', '1', '2'), not the values, and it will also pick up any custom enumerable properties added to the array, which for...of never does. for...of, in contrast, works only on iterables (arrays, strings, Maps, Sets, and other objects implementing the iterable protocol) and yields the actual values directly, not keys.
Cricket analogy: for...in over a batting lineup array gives you the slot numbers as strings ('0','1','2') plus any custom note like 'captain' attached to the array, not the actual player names -- for...of instead hands you each player's name directly, since an array is iterable.
Do not use for...in to iterate arrays when you need values or a guaranteed numeric order: it yields string indexes, may include extra enumerable properties, and does not guarantee order across all engines/edge cases. Use for...of (or classic for, or array methods like forEach/map) for arrays, and reserve for...in for plain objects when you specifically need to iterate over their keys.
4. Example
const fruits = ['apple', 'banana', 'cherry'];
// Classic for: index-based access
for (let i = 0; i < fruits.length; i++) {
console.log(i, fruits[i]);
}
// for...of: direct values
for (const fruit of fruits) {
console.log('value:', fruit);
}
// for...in: keys/indexes as strings
for (const key in fruits) {
console.log('key:', key, typeof key);
}5. Output
0 apple
1 banana
2 cherry
value: apple
value: banana
value: cherry
key: 0 string
key: 1 string
key: 2 string6. Key Takeaways
- The classic for loop has three parts: initializer, condition, and update, executed in a predictable cycle.
- for...of iterates over values of an iterable (arrays, strings, Maps, Sets); for...in iterates over enumerable property keys (as strings).
- For arrays, prefer for...of or a classic for loop over for...in, which yields string indexes and can include extra enumerable properties.
- Declaring the loop counter with let gives each iteration its own binding, which matters for closures created inside the loop.
- for...in also enumerates inherited enumerable properties, which is rarely what you want for plain data iteration.
Practice what you learned
1. What type are the values yielded by `for (const key in fruits)` when fruits is an array?
2. Which loop variant directly gives you the values of an array's elements rather than their indexes or keys?
3. Why is for...in generally discouraged for iterating arrays?
4. What does the following print? for (let i = 0; i < 3; i++) { if (i === 1) continue; console.log(i); }
5. Why does declaring the loop counter with let (instead of var) matter when the loop body creates closures, e.g. via setTimeout?
Was this page helpful?
You May Also Like
while and do-while Loops in JavaScript
Understand condition-controlled looping with while and do-while, including the crucial difference in when the condition is checked and how to avoid infinite loops.
break and continue in JavaScript
Learn how to alter loop execution with break and continue, and how labeled statements let you control outer loops from inside nested loops.
Common Array Methods in JavaScript
Explore the most-used array methods, split into mutating methods that change the original array and non-mutating methods that return a new array.
let, const and Block Scope in JavaScript
How let and const introduced block scoping, the temporal dead zone, and why const does not make objects immutable.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics