Loops

Looping in JavaScript

Loops let you repeat actions and iterate over data. JavaScript has several loop types, but you’ll use two of them most of the time: for...of and the classic for loop.

for…of — iterate over arrays

The cleanest way to loop through an array:

const fruits = ["Apple", "Banana", "Cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}
// Apple
// Banana
// Cherry

JavaScript
Python

for (const item of items) {
  console.log(item);
}

for item in items:
    print(item)

JavaScript’s for...of is Python’s for...in. Same concept, different keyword. Use const for the loop variable if you don’t need to reassign it inside the loop.

When you need the index

const users = ["Sarah", "John", "Alice"];

// Use .forEach() with index
users.forEach((user, index) => {
  console.log(`${index + 1}. ${user}`);
});
// 1. Sarah
// 2. John
// 3. Alice

// Or use .entries()
for (const [index, user] of users.entries()) {
  console.log(`${index + 1}. ${user}`);
}

JavaScript
Python

for (const [index, user] of users.entries()) {
  console.log(`${index}: ${user}`);
}

for index, user in enumerate(users):
    print(f"{index}: {user}")

.entries() is JavaScript’s equivalent of Python’s enumerate().

for…in — iterate over object keys

const user = { name: "Sarah", age: 28, role: "admin" };

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// name: Sarah
// age: 28
// role: admin

for...in is for objects. for...of is for arrays. Mixing them up is a common mistake. for...in on an array gives you index strings (“0”, “1”, “2”), not the values.

For objects, you can also use Object.entries() which is often cleaner:

const user = { name: "Sarah", age: 28, role: "admin" };

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

Classic for loop

The traditional loop with a counter variable. Use it when you need precise control over the iteration:

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

Three parts: for (initialization; condition; update)

initialization: let i = 0 — runs once before the loop
condition: i < 5 — checked before each iteration
update: i++ — runs after each iteration

Practical example

// Generate a grid of items
const rows = 3;
const cols = 4;

for (let row = 0; row < rows; row++) {
  for (let col = 0; col < cols; col++) {
    console.log(`Cell [${row}, ${col}]`);
  }
}

Looping backwards

const items = ["first", "second", "third"];

for (let i = items.length - 1; i >= 0; i--) {
  console.log(items[i]);
}
// third, second, first

while and do…while

For loops where you don’t know the count in advance:

// while — checks condition first
let attempts = 0;
while (attempts < 3) {
  console.log(`Attempt ${attempts + 1}`);
  attempts++;
}

// do...while — runs at least once, checks condition after
let input;
do {
  input = getInput(); // Runs at least once
} while (!isValid(input));

while loops are uncommon in web development. You’ll mostly use for...of for arrays and array methods like .map() and .forEach(). But while is useful for retry logic and polling patterns.

break and continue

Control the flow inside loops:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// break — exit the loop entirely
for (const num of numbers) {
  if (num > 5) break;
  console.log(num);
}
// 1, 2, 3, 4, 5

// continue — skip to the next iteration
for (const num of numbers) {
  if (num % 2 === 0) continue; // Skip even numbers
  console.log(num);
}
// 1, 3, 5, 7, 9

Loops vs array methods

In modern JavaScript, you’ll often choose between a loop and an array method. Here’s when to use each:

Task	Use
Transform each item	`.map()`
Keep some items	`.filter()`
Find one item	`.find()`
Check if something exists	`.includes()` or `.some()`
Calculate a total	`.reduce()`
Side effects (log, DOM update)	`.forEach()` or `for...of`
Need `break`/`continue`	`for...of` or `for`
Need the index	`.forEach()` or `for...of` with `.entries()`

// Array method approach — usually preferred
const activeUsers = users.filter(u => u.active).map(u => u.name);

// Loop approach — needed for complex logic or early exit
const results = [];
for (const user of users) {
  if (user.role === "banned") continue;
  if (results.length >= 10) break;
  if (user.active) {
    results.push(user.name);
  }
}

Prefer array methods when possible — they’re more readable and less error-prone. Use for...of when you need break, continue, or complex multi-step logic inside the loop.

What’s next?

You’ve covered working with data — arrays, objects, destructuring, spread, JSON, conditionals, and loops. This is the toolbox you’ll use in every web application. Next up: asynchronous JavaScript. This is where things get interesting — you’ll learn how JavaScript handles operations that take time, like fetching data from your FastAPI backend.

Why async matters

Understand why JavaScript handles time differently

Data structures

Working with JSON

Control flow

Looping in JavaScript

for…of — iterate over arrays

When you need the index

for…in — iterate over object keys

Classic for loop

Practical example

Looping backwards

while and do…while

break and continue

Loops vs array methods

What’s next?

Why async matters

​Looping in JavaScript

​for…of — iterate over arrays

​When you need the index

​for…in — iterate over object keys

​Classic for loop

​Practical example

​Looping backwards

​while and do…while

​break and continue

​Loops vs array methods

​What’s next?

Why async matters

Looping in JavaScript

for…of — iterate over arrays

When you need the index

for…in — iterate over object keys

Classic for loop

Practical example

Looping backwards

while and do…while

break and continue

Loops vs array methods

What’s next?