for Loop in JavaScript

Analogy categoryAnalogies

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

javascript

// 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

javascript

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

text

0 apple
1 banana
2 cherry
value: apple
value: banana
value: cherry
key: 0 string
key: 1 string
key: 2 string

6. 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.