JS Loop For

Think of a mail carrier delivering letters down a street, house number one, then two, then three, repeating the exact same delivery action at every single address until the street is finished. A for loop in JavaScript does that same repeated action automatically, running a block of code once for each item in a sequence, whether that's a fixed number of times or once for every element in an array. Loops power everything from displaying every tutorial title in a list to processing quiz answers one by one, exactly the kind of repetitive task that shows up constantly across cookiescursor.com.

In this page:

The Standard for Loop
for...in
for...of
break and continue
Nested Loops

The Standard for Loop

A standard for loop has three parts inside its parentheses, an initializer that runs once at the start, a condition checked before every iteration, and an increment step that runs after each iteration.

Note: The classic pattern for (let i = 0; i < array.length; i++) is worth memorizing, it's one of the most common patterns in everyday JavaScript.

Warning: Using <= instead of < against an array's length causes the loop to try accessing one index past the end, resulting in undefined.

Example: The Standard for Loop

javascript

for (let i = 0; i < 3; i++) {
  console.log(i);
}

for...in

for...in iterates over the enumerable property keys of an object, giving you each key name in turn, which you can then use to look up the corresponding value. It's generally avoided for arrays since it iterates keys as strings and can pick up inherited properties.

Note: for...in is designed for plain objects, for arrays, prefer for...of or array methods, they avoid some quirks of for...in on arrays.

Warning: for...in on an array also visits inherited enumerable properties in some setups, making it a less predictable choice than for...of for arrays specifically.

Example: for...in

javascript

const user = { name: "Sam", age: 30 };
for (let key in user) {
  console.log(key, user[key]);
}

for...of

for...of iterates directly over the values of any iterable, like arrays, strings, and more advanced structures like Sets and Maps, without needing to manage an index at all.

Note: for...of is generally the cleanest choice for looping over arrays when you don't specifically need the index of each element.

Warning: for...of cannot be used directly on a plain object, objects are not iterable by default, use for...in or Object.keys() instead.

Example: for...of

javascript

const colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}

break and continue

break immediately exits a loop entirely, skipping any remaining iterations, while continue skips only the current iteration and moves on to the next one, without ending the loop.

Note: Use break once you've found what you're searching for in a loop, there's no need to keep checking the rest of the items.

Warning: continue inside a for loop still runs the increment step before moving to the next iteration, forgetting this can cause confusion about the loop's state.

Example: break and continue

javascript

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  if (i === 1) continue;
  console.log(i);
}

Nested Loops

A loop can be placed inside another loop, running the inner loop completely for every single iteration of the outer loop, commonly used for working with grid-like or two-dimensional data.

Note: Give nested loop counters distinct names, like i and j, to keep track of which loop each counter belongs to.

Warning: Nested loops can become slow quickly as the size of the data grows, since the inner loop runs completely for every outer iteration.

Example: Nested Loops

javascript

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 2; j++) {
    console.log(i, j);
  }
}

Common Mistakes

Writing an incorrect stopping condition, like using <= instead of < with a zero-based array length, causing an out-of-bounds access.
Forgetting to increment the loop counter, which creates an infinite loop that never satisfies its stopping condition.
Using for...in on an array when for...of or a regular for loop is actually the more appropriate, index-safe choice.

Chapter Summary

A standard for loop runs based on an initializer, a condition, and an increment step, all defined in its parentheses.
for...in iterates over an object's property keys, while for...of iterates directly over an iterable's values.
break exits a loop entirely, continue skips to the next iteration, and loops can be nested inside each other.

Browser Support

for, for...in, and for...of loops are all core JavaScript features supported identically in every modern browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Switch Next Lesson → JS Loop While

JS Loop For

The Standard for Loop

for...in

for...of

break and continue

Nested Loops

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code