Looping statement enable our JavaScript program to continuously execute a piece of code as long as a specified condition is true. Looping statement makes the JavaScript code compact. There are besically five types of looping statements-
A for loop repeats a piece of code until a specified condition is true. The for Loop has three important parts i.e. Initialization, Condition, and Increment/Decrement.
for (Initialization; Condition; Increment/Decrement) {
...........
}
for (i = 0; i <=5; i++) {
console.log(i);
}
The while loop is a more simple version of the for, which repeats a piece of code until a specified condition is true.
let i = 10;
while (i > 0) {
console.log(i);
i--;
}
The do-while loop is very similar to the while loop, but it executed at least once whether the condition is true or false, because condition check happens at the end of the loop.
let i = 0;
do {
i++;
console.log(i);
} while (i <= 5);
The for-in loop is a special kind of a loop in JavaScript which iterates over the properties name of an object, or the elements of an array.
let datas = [3, 5, 7, 9, 11];
for (var data in datas) {
console.log(data); // 0, 1, 2, 3, 4
}
The for-of loop is another special kind of a loop in JavaScript introduced in ES6, which iterates over the propertie value of an array.
let datas = [3, 5, 7, 9, 11];
for (var data of datas) {
console.log(data); // 3, 5, 7, 9, 11
}
The break statement exits a loop immediately. The continue statement skips the current iteration and moves to the next one.
// break - exit loop when 5 is found
for (let i = 0; i < 10; i++) {
if (i === 5) break;
console.log(i); // 0, 1, 2, 3, 4
}
// continue - skip even numbers
for (let i = 0; i <= 10; i++) {
if (i % 2 === 0) continue;
console.log(i); // 1, 3, 5, 7, 9
}
// Nested loop with labeled break
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (j === 1) break outer; // breaks both loops
console.log(`i=${i}, j=${j}`);
}
}
// Output: i=0, j=0
ES5+ provides functional iteration methods that are often cleaner than traditional loops for working with arrays.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// forEach - iterate without return value
numbers.forEach((n, index) => console.log(`[${index}] = ${n}`));
// map - transform each element
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2,4,6,8,10,12,14,16,18,20]
// filter - keep elements matching condition
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2,4,6,8,10]
// reduce - accumulate to single value
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 55
// find - first match
const firstOver5 = numbers.find(n => n > 5);
console.log(firstOver5); // 6
// some / every
console.log(numbers.some(n => n > 9)); // true
console.log(numbers.every(n => n > 0)); // true
Different loops are better for different situations. Choosing the right one makes your code easier to read and helps avoid common mistakes.
| Loop Type | Best Use Case | Notes |
|---|---|---|
for | When you know the start, stop, and step. | Best for indexed iteration and counting. |
while | When repetition depends on a condition. | Useful when the number of iterations is unknown beforehand. |
do...while | When the body must run at least once. | Good for menu loops and retry prompts. |
for...in | Iterating over object keys. | Avoid using it for normal array value iteration. |
for...of | Iterating over iterable values. | Ideal for arrays, strings, Maps, and Sets. |
| Array methods | Transforming or filtering arrays. | Use map(), filter(), reduce(), etc. for readable functional code. |
Explore 500+ free tutorials across 20+ languages and frameworks.