JavaScript Loops

Loops execute a block of code repeatedly. JavaScript provides several loop types, each suited for different situations. Choosing the right loop makes your code cleaner and more efficient.

Overview of Loop Types

JavaScript has five main loop types. Each is designed for a specific use case.

Loop	Best For	Iterates Over
for	Known number of iterations	Index counter
while	Unknown iterations, condition-based	Condition check
do...while	Run at least once	Condition check (post)
for...in	Object properties	Keys/property names
for...of	Arrays, strings, iterables	Values

The for Loop

The for loop is the most common loop. It has three parts: initialization, condition, and update — all in one line. Use it when you know how many times to iterate.

for Loop

// Basic for loop
for (let i = 0; i < 5; i++) {
  console.log("Iteration: " + i);
}
// Output: 0, 1, 2, 3, 4

// Looping through an array
let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, cherry

// Counting backwards
for (let i = 5; i > 0; i--) {
  console.log(i);
}
// Output: 5, 4, 3, 2, 1

The while Loop

The while loop runs as long as a condition is true. Use it when you don't know in advance how many iterations are needed.

while Loop

// Basic while loop
let count = 0;
while (count < 3) {
  console.log("Count: " + count);
  count++;
}
// Output: 0, 1, 2

// Finding a value
let num = 1;
while (num < 100) {
  num *= 2;
}
console.log("First power of 2 >= 100: " + num);
// Output: 128

The do...while Loop

The do...while loop executes the code block first, then checks the condition. This guarantees at least one execution, even if the condition is initially false.

do...while Loop

// Always runs at least once
let x = 10;
do {
  console.log("x = " + x);
  x++;
} while (x < 3);
// Output: "x = 10" (runs once even though 10 < 3 is false)

// Practical: input validation simulation
let attempts = 0;
let password;
do {
  password = attempts === 2 ? "correct" : "wrong";
  attempts++;
  console.log("Attempt " + attempts + ": " + password);
} while (password !== "correct");
// Output: Attempt 1: wrong, Attempt 2: wrong, Attempt 3: correct

for...in Loop

The for...in loop iterates over the enumerable properties (keys) of an object. It is designed for objects, not arrays.

for...in Loop

let person = {
  name: "Alice",
  age: 30,
  city: "NYC"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}
// Output:
// name: Alice
// age: 30
// city: NYC

for...of Loop

The for...of loop iterates over the values of any iterable object: arrays, strings, Maps, Sets, and more. It is the cleanest way to loop through array values.

for...of Loop

// Arrays
let colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}
// Output: red, green, blue

// Strings
for (let char of "Hello") {
  console.log(char);
}
// Output: H, e, l, l, o

// With destructuring
let entries = [["a", 1], ["b", 2], ["c", 3]];
for (let [key, value] of entries) {
  console.log(key + " = " + value);
}
// Output: a = 1, b = 2, c = 3

📝 Note: Do not use for...in to loop over arrays. It iterates over property names (which are string indices), not values, and may include inherited properties. Use for...of or a regular for loop for arrays.

Exercise:

Which loop guarantees at least one execution?

forwhiledo...whilefor...of

❮ JS Logical Operators JS For Loop ❯