Loops

for Loop

Basic Syntax

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

Components

// Initialization: let i = 0
// Condition: i < 5
// Increment: i++

for (let i = 0; i < 5; i++) {
  // Code runs 5 times
}

Counting Patterns

// Count up
for (let i = 1; i <= 10; i++) {
  console.log(i); // 1 to 10
}

// Count down
for (let i = 10; i >= 1; i--) {
  console.log(i); // 10 to 1
}

// Step by 2
for (let i = 0; i < 10; i += 2) {
  console.log(i); // 0, 2, 4, 6, 8
}

Looping Through Arrays

const colors = ['red', 'green', 'blue'];

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

break and continue

// break: exit loop
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // 0, 1, 2, 3, 4
}

// continue: skip iteration
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue;
  console.log(i); // 1, 3, 5, 7, 9
}

Nested Loops

for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(`${i}, ${j}`);
  }
}

Labeled Statements

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outer;
    console.log(`${i}, ${j}`);
  }
}

while Loop

Basic Syntax

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

do...while

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);
// Always runs at least once

When to Use While

// When you don't know how many iterations
let result = 1;
while (result < 1000) {
  result *= 2;
}

// Reading input until condition
let input;
while (input !== 'quit') {
  input = prompt('Enter command:');
}

Avoiding Infinite Loops

// Danger: infinite loop
while (true) {
  console.log('forever');
}

// Safe: with break
while (true) {
  const input = getData();
  if (!input) break;
  process(input);
}

while vs for

// for: when you know iteration count
for (let i = 0; i < 10; i++) { }

// while: when condition-based
while (isRunning) { }

// do...while: when need to run at least once
do {
  // run at least once
} while (condition);

Practical Examples

// Find first even number
const numbers = [1, 3, 4, 7, 8];
let i = 0;
while (i < numbers.length && numbers[i] % 2 !== 0) {
  i++;
}
const firstEven = numbers[i]; // 4

// Retry logic
let attempts = 0;
while (attempts < 3) {
  try {
    fetchData();
    break;
  } catch (e) {
    attempts++;
  }
}

for...of and for...in

for...of (Values)

// Arrays
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}

// Strings
const name = 'John';
for (const char of name) {
  console.log(char);
}

// Maps
const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
  console.log(key, value);
}

// Sets
const set = new Set([1, 2, 3]);
for (const value of set) {
  console.log(value);
}

for...in (Keys/Indices)

// Objects
const person = { name: 'John', age: 30 };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// Arrays (not recommended)
const arr = ['a', 'b', 'c'];
for (const index in arr) {
  console.log(index); // '0', '1', '2' (strings!)
}

Comparison

const arr = ['a', 'b', 'c'];

// for...of: values
for (const value of arr) {
  console.log(value); // 'a', 'b', 'c'
}

// for...in: indices (as strings)
for (const index in arr) {
  console.log(index); // '0', '1', '2'
}

// Traditional for: index (as number)
for (let i = 0; i < arr.length; i++) {
  console.log(i); // 0, 1, 2
}

Best Practices

// Use for...of for values
for (const item of items) {
  process(item);
}

// Use Object.keys/values/entries for objects
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

// Avoid for...in for arrays (iterates prototype)
// Use for...of or traditional for instead

Iterables

// Arrays, Strings, Maps, Sets are iterable
const iterable = [1, 2, 3];
for (const value of iterable) { }

// Plain objects are NOT iterable
const obj = { a: 1, b: 2 };
// for (const value of obj) { } // Error!

// Use Object.entries instead
for (const [key, value] of Object.entries(obj)) { }