JavaScript Loops

Introduction to JavaScript Loops

JavaScript loops are a fundamental concept in programming that allow the execution of code blocks multiple times. This guide provides an in-depth understanding of different types of loops in JavaScript, including their syntax and practical applications.

What Are Loops in JavaScript?

A loop runs the same block of code over and over while a condition stays true. Each pass through the body is called an iteration. Loops let you process every item in a list, repeat an action a fixed number of times, or keep going until some state changes — all without copying and pasting code.

Why Use Loops?

Without loops you would have to write the same statement once for every repetition:

console.log(1);
console.log(2);
console.log(3);
// ...and so on for every number

A loop collapses that into a few lines that work for 3 numbers or 3 million. The result is code that is shorter, easier to change, and far less error-prone.

Understanding Different Types of Loops

Let's dive into the various loops available in JavaScript, their syntax, and how to use them effectively.

The while Loop

The while loop is the simplest type of loop in JavaScript. It checks the condition before each iteration and keeps running as long as that condition is true. Use it when you don't know in advance how many times you need to repeat — for example, reading until you hit an end marker.

Syntax:

while (condition) {
  // code to be executed
}

Example:

The body must eventually make the condition false. If it never does, you create an infinite loop that freezes the page. The i++ above is what guarantees the loop ends — forget it and i < 5 stays true forever.

The do...while Loop

The do...while loop checks its condition after each iteration, so the body always runs at least once — even if the condition is false from the start. This is handy for prompts or menus that must show at least once before you decide whether to repeat.

Syntax:

do {
  // code to be executed
} while (condition);

Example:

The for Loop

The for loop is the most commonly used loop. It packs three parts into one line: an initialization (runs once at the start), a condition (checked before every iteration), and a final expression (runs after each iteration, usually to increment a counter). It is the natural choice when you know how many times you want to repeat.

Syntax:

for (initialization; condition; finalExpression) {
  // code to be executed
}

Example:

The for...in Loop

This loop iterates over the enumerable property names (keys) of an object. Reach for it when you need the keys of an object. Avoid it for arrays: it yields string indexes ("0", "1", …), doesn't guarantee order, and also walks inherited properties — use for...of or array methods instead.

Syntax:

for (variable in object) {
  // code to be executed
}

Example:

The for...of Loop

The for...of loop iterates over the values of iterable objects such as arrays, strings, Map, and Set. It is the cleanest way to walk through array elements when you don't need the index. Remember the difference: for...in gives you keys, for...of gives you values.

Syntax:

for (variable of iterable) {
  // code to be executed
}

Example:

Choosing the Right Loop

For most array work you'll also meet methods like forEach, map, and filter (see array methods) — they often read more clearly than a manual loop.

Nested Loops

A loop can contain another loop. The inner loop runs fully for every single pass of the outer loop, which is useful for grids, tables, and pairs.

Controlling Loop Execution

Using break in Loops

The break statement can be used to exit a loop before the condition is false.

Example:

Using continue in Loops

The continue statement skips the current iteration and continues with the next one.

Example:

Breaking Out of Nested Loops

By default break only exits the innermost loop. To break out of an outer loop from inside an inner one, give the outer loop a label and break to it.

Conclusion

Understanding and effectively using different types of loops in JavaScript enhances your ability to write concise and efficient code. Pick for when you know the count, while/do...while when you don't, for...of for values, and for...in for object keys — and watch out for infinite loops.

Continue with related topics: conditional operators, arrays, array methods, and functions.

Practice