Academy — Sanjib Sikder

The Problem Loops Solve

Suppose you want to print the numbers 1 through 10. Without loops:

console.log(1);
console.log(2);
console.log(3);
// ... seven more lines
console.log(10);

Now suppose you want 1 through 10,000. That's not a program — that's punishment. The computer can do repetitive work at billions of operations per second. Your job is to describe the repetition once, then let the machine do it.

The for Loop

The most common loop in JavaScript:

JavaScript

Ctrl+Enter to run

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

The structure has three parts inside the parentheses, separated by semicolons:

for (initialisation; condition; update) {
  // body
}

Initialisation — let i = 1 — runs once before the loop starts; creates the counter
Condition — i <= 10 — checked before every iteration; if false, loop stops
Update — i++ — runs after every iteration; i++ means i = i + 1

Read it as: "Start with i=1. While i is ≤ 10, run the body, then increment i."

The variable i is just a convention — you can name it anything. i stands for index, and you will see it everywhere.

Counting Down, Stepping by 2

JavaScript

Ctrl+Enter to run

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

console.log("---");

// Every even number from 2 to 20
for (let i = 2; i <= 20; i += 2) {
console.log(i);
}

The update step can be anything: i--, i += 2, i *= 2. The loop is fully general.

The while Loop

while is simpler: it repeats as long as a condition is true.

JavaScript

Ctrl+Enter to run

let count = 1;

while (count <= 5) {
console.log("Count:", count);
count++;
}

for and while can always replace each other. The convention is:

Use for when you know in advance how many times to loop
Use while when you loop until something happens — and you don't know how many steps that will take

JavaScript

Ctrl+Enter to run

// Find the first power of 2 greater than 1000
let value = 1;
let exponent = 0;

while (value <= 1000) {
value *= 2;
exponent++;
}

console.log(`2^${exponent} = ${value}`);

You don't know upfront how many doublings it takes to exceed 1000. while is the natural fit.

break and continue

Two keywords that give you fine control inside any loop:

JavaScript

Ctrl+Enter to run

// break: exit the loop immediately
for (let i = 1; i <= 10; i++) {
  if (i === 6) break;
  console.log(i);
}

console.log("--- after break ---");

// continue: skip this iteration, move to the next
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) continue; // skip even numbers
console.log(i);
}

break is an emergency exit — the loop ends entirely. continue is a skip — the current iteration is abandoned and the loop moves on to the next one.

Loops + Functions = Power

Loops become genuinely powerful when combined with functions from the previous lesson:

JavaScript

Ctrl+Enter to run

function isPrime(n) {
  if (n < 2) return false;
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) return false;
  }
  return true;
}

// Print all primes up to 50
for (let n = 2; n <= 50; n++) {
if (isPrime(n)) {
console.log(n);
}
}

The prime check runs up to √n rather than n — a classical optimisation. If n has no factor up to its square root, it has no factors at all. The outer loop just calls the function for each candidate.

Arrays — A First Look

A loop that counts numbers is useful. A loop that processes a collection of real data is essential. That means we need arrays — and arrays get their own full lesson next. But you need a preview now so the loop examples feel real.

An array is an ordered list of values:

JavaScript

Ctrl+Enter to run

const temperatures = [38.2, 36.9, 37.5, 39.1, 36.6];

// Loop over every element
for (let i = 0; i < temperatures.length; i++) {
console.log(`Day ${i + 1}: ${temperatures[i]}°C`);
}

temperatures[i] accesses the element at position i. Arrays are zero-indexed — position 0 is the first element, position length - 1 is the last. The loop runs from 0 to length - 1 exactly.

The for...of Loop

The index-based for loop is powerful but verbose when you just want every element. for...of is cleaner:

JavaScript

Ctrl+Enter to run

const cities = ["Kolkata", "Mumbai", "Delhi", "Chennai"];

for (const city of cities) {
console.log(city);
}

for...of gives you each value directly, without indices. Use it when you don't need to know the position — which is most of the time.

forEach — The Functional Way

Because functions are values (Lesson 5), arrays have a built-in method that accepts a function and calls it once for each element:

JavaScript

Ctrl+Enter to run

const marks = [85, 92, 67, 78, 95];

marks.forEach((mark, index) => {
const grade = mark >= 90 ? "A" : mark >= 75 ? "B" : "C";
console.log(`Student ${index + 1}: ${mark} → ${grade}`);
});

forEach takes an arrow function. That function receives each element (and optionally its index) as arguments. This is your first real look at higher-order functions — functions that take other functions as arguments. Arrays are full of them, and they are the subject of the lesson after next.

A Complete Example: Statistics

JavaScript

Ctrl+Enter to run

function analyse(label, data) {
  let sum = 0;
  let min = data[0];
  let max = data[0];

for (const value of data) {
sum += value;
if (value < min) min = value;
if (value > max) max = value;
}

const mean = sum / data.length;

console.log(`--- ${label} ---`);
console.log(`Count : ${data.length}`);
console.log(`Sum : ${sum}`);
console.log(`Mean : ${mean.toFixed(2)}`);
console.log(`Min : ${min}`);
console.log(`Max : ${max}`);
}

const physics = [82, 91, 78, 95, 88, 74, 99, 83];
const chemistry = [70, 85, 91, 67, 88, 92, 75, 80];

analyse("Physics", physics);
analyse("Chemistry", chemistry);

One function, any dataset. The loop does the traversal; the function wraps the logic; the result is readable, reusable, and correct. This is what programs look like when they grow up.

What You Have Learned

Loops are how you tell the computer to repeat work without repeating yourself.

The key ideas:

for — best when you know the count: initialise, condition, update
while — best when you loop until something happens
break exits a loop entirely; continue skips one iteration
for...of — the clean way to visit every element of an array
forEach — the functional way; passes each element to a callback function
Loops + functions = the first real taste of computational power

In the next lesson: Arrays in full — how to store, access, transform, search, and sort collections of data. Arrays are the most-used data structure in JavaScript, and their built-in methods (map, filter, reduce) will change how you think about processing information.