Looping Statements in JavaScript

Looping Statements

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-

• The for loop.
• The while loop.
• The do-while loop.
• The for-in loop.
• The for-of loop.

The for Loop

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

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

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

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

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
}

break and continue

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

Array Iteration Methods (Modern Loops)

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

Which Loop Should You Use?

Different loops are better for different situations. Choosing the right one makes your code easier to read and helps avoid common mistakes.