JavaScript Loops for Beginners: For and While Loops

If you searched for "JavaScript loops for beginners," here is the short answer: a loop is a way to run the same block of code over and over, automatically, instead of writing it out by hand every time. JavaScript gives you a few kinds of loops, and the two you will use the most are the for loop and the while loop. This guide explains both, step by step, with small examples you can copy, paste, and run right now.

You do not need any prior experience to follow along. We will define every term the first time it appears, and every code example is short enough to type into your browser console in a few seconds.

What is a loop in JavaScript?

A loop is a piece of code that repeats a set of instructions until a condition tells it to stop. Imagine you need to print the numbers 1 through 5. Without a loop, you would write five separate lines of code. With a loop, you write the instruction once, and JavaScript repeats it for you.

Loops matter because real programs deal with lists all the time: a list of products in a shop, a list of comments on a post, a list of rows from a database. Instead of writing code for each item by hand, you write one loop that handles every item, no matter how many there are.

The for loop

The for loop is the most common loop in JavaScript. It is built for situations where you know how many times you want to repeat something, like "do this 5 times" or "do this once for every item in a list."

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Here is what each part does, in plain words:

• for ( ... ) — this keyword tells JavaScript you are starting a for loop.
• let i = 1 — this creates a variable called i (short for "index") and sets it to 1. This runs only once, right before the loop starts.
• i <= 5 — this is the condition. Before each repeat, JavaScript checks it. If it is true, the loop body runs. If it is false, the loop stops.
• i++ — this runs after each repeat and increases i by 1 (it is short for i = i + 1).
• { console.log(i); } — this is the loop body: the code that actually repeats. console.log() prints a value to the browser or terminal console.

So this loop prints 1, then 2, then 3, then 4, then 5, and then stops because 6 <= 5 is false.

The while loop

A while loop repeats code as long as a condition stays true. Use it when you do not know in advance exactly how many times you need to repeat something.

let count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}

Line by line: let count = 1 creates a starting variable, this time outside the loop. while (count <= 5) checks the condition before every repeat, just like the for loop's condition. Inside the loop body, console.log(count) prints the current value, and count++ increases it by 1 so the loop eventually stops.

The do...while loop

A do...while loop is almost identical to a while loop, with one difference: it runs the code first and checks the condition after. This guarantees the loop body runs at least once, even if the condition is false from the start.

let n = 10;

do {
  console.log(n);
  n++;
} while (n < 5);

Even though n < 5 is false right away (10 is not less than 5), this loop still prints 10 once, because do...while always runs the body before it checks the condition. You will not use this loop often as a beginner, but it is good to recognize it when you see it.

Looping through arrays

An array is a list of values stored in one variable, like ["apple", "banana", "cherry"]. Looping through arrays is one of the most common reasons to use a loop. If you have not covered arrays yet, it helps to read our guide on JavaScript arrays for beginners before continuing.

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}

The for...of loop is a special, easier version of the for loop built for arrays and other lists. for (const fruit of fruits) means "for each value in fruits, call it fruit, and run the code below." You do not need to manage a counter variable like i — JavaScript handles that for you.

You can also loop through an array with a regular for loop and an index, which is useful when you need the position of each item:

const fruits = ["apple", "banana", "cherry"];

for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

fruits.length is a property that tells you how many items are in the array (here, 3). fruits[i] reads the item at position i. Array positions start at 0, so fruits[0] is "apple", fruits[1] is "banana", and fruits[2] is "cherry".

Stopping early: break and continue

Sometimes you want to stop a loop early, or skip one item without stopping the whole loop. JavaScript gives you two keywords for this.

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // stop the loop completely
  }
  console.log(i);
}

This prints 1, 2, 3, 4, and then stops as soon as i equals 5, because break exits the loop immediately, even though the condition i <= 10 is still true.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // skip this one number
  }
  console.log(i);
}

continue skips just the current repeat and moves on to the next one. This prints 1, 2, 4, 5 — it skips printing 3, but the loop keeps going afterward.

Common mistakes beginners make with loops

• Forgetting to update the counter, which causes an infinite loop that freezes the page.
• Using <= when you meant < (or the other way around), which runs the loop one time too many or too few.
• Mixing up array positions — remember arrays start counting at 0, not 1.
• Changing the array you are looping over while the loop is still running, which can skip items unexpectedly.
• Using a for loop when a simpler for...of loop (or an array method like map or forEach) would be easier to read.

Which loop should you use?

Try it yourself

Open your browser, right-click anywhere on a page, choose "Inspect," and click the "Console" tab. Paste any of the code examples above and press Enter. Try changing the numbers or the condition and see how the output changes — this is the fastest way to build a real feel for how loops work.