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

Syntax

javascript

for (let i = start; i < end; i++) {
  // loop body
}

for (const item of iterable) {
  // loop body
}

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

// Classic for-loop: `let i = 0; i < 3; i++`
// Classic for-loop: `let i = 0; i < 3; i++`
for (let i = 0; i < 3; i++) {
  // Print `i` to the console
  // Print `i` to the console
  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

// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
const user = { name: "Sam", age: 30 };
// Loop over the enumerable keys of `user`, binding each to `key`
// Loop over the enumerable keys of `user`, binding each to `key`
for (let key in user) {
  // Print `key, user[key]` to the console
  // Print `key, user[key]` to the console
  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

// Declare the constant `colors`, set to `["red", "green", "blue"]`
// Declare the constant `colors`, set to `["red", "green", "blue"]`
const colors = ["red", "green", "blue"];
// Loop over `colors`, binding each item to `color`
// Loop over `colors`, binding each item to `color`
for (let color of colors) {
  // Print `color` to the console
  // Print `color` to the console
  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

// Classic for-loop: `let i = 0; i < 5; i++`
// Classic for-loop: `let i = 0; i < 5; i++`
for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  if (i === 1) continue;
  // Print `i` to the console
  // Print `i` to the console
  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

// Classic for-loop: `let i = 1; i <= 2; i++`
// Classic for-loop: `let i = 1; i <= 2; i++`
for (let i = 1; i <= 2; i++) {
  // Classic for-loop: `let j = 1; j <= 2; j++`
  // Classic for-loop: `let j = 1; j <= 2; j++`
  for (let j = 1; j <= 2; j++) {
    // Print `i, j` to the console
    // Print `i, j` to the console
    console.log(i, j);
  }
}

Live Example

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