JavaScript Loops: Repeating Actions Over Your Data

Say you have a list of 100 products to display. You’re not about to write 100 lines of code by hand. Instead, you write the display code once and tell the computer: “do this for every item in the list.” That’s a loop — a way to run the same block of code over and over, which happens to be one of the things computers do best.

Loops go hand in hand with the arrays you just learned. Most of the time, a loop is how you walk through an array and do something with each item. Let’s look at the main kinds.

The for loop

The classic loop is the for loop. It looks a little busy at first glance, but it’s really just three small parts that control how many times the code runs:

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

The three parts inside the parentheses, separated by semicolons, are:

1. Start: let i = 0 — create a counter variable, starting at 0.
2. Condition: i < 5 — keep looping as long as this is true.
3. Step: i++ — after each pass, add 1 to the counter.

So i is 0 on the first pass, then 1, 2, 3, 4 — and the loop stops when i hits 5 (because 5 < 5 is false). The name i (short for “index”) is the conventional name for a loop counter. Tweak the numbers and you control exactly how many times the loop runs.

Looping through an array with for

This is where loops and arrays really come together. Because array indexes start at 0 and run up to length - 1, a for loop is a perfect fit for visiting every item:

const fruits = ["apple", "banana", "cherry"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// prints: apple  banana  cherry

The counter i goes 0, 1, 2 — and fruits[i] pulls out each item in turn. Using fruits.length as the condition means the loop adjusts to the array’s size on its own, whether it holds 3 items or 3000. This is the fundamental pattern for working through a list.

The while loop

A while loop has a simpler shape: it just keeps repeating as long as a condition stays true. Reach for it when you don’t know upfront how many times you’ll loop:

let count = 0;

while (count < 5) {
  console.log(count);
  count++;
}

This does exactly what our first for loop did, only the pieces are spread out: you set up the counter before the loop, check the condition at the top, and bump the counter inside. while shines when the number of repetitions depends on something that happens during the loop, rather than a fixed count you know ahead of time.

The modern way: for…of

Modern JavaScript has a cleaner loop for going through arrays, called for...of. It hands you each item directly — no counter to set up and manage:

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}
// prints: apple  banana  cherry

Read it as “for each fruit of fruits.” On every pass, fruit becomes the next item in the array. No index, no length, no i++ — just the item itself. When you simply want to do something with every item and don’t need the index, for...of is more readable and harder to get wrong than a classic for loop. It’s a great default for stepping through arrays.

Array methods: forEach and map

Arrays also come with built-in methods that loop for you, and you’ll see them everywhere in modern code. The most direct one is forEach, which runs a function for every item:

const fruits = ["apple", "banana", "cherry"];

fruits.forEach((fruit) => {
  console.log(fruit);
});

You hand forEach a function (here, an arrow function), and it calls that function once for each item, passing the item in. This is where the arrow functions from the functions article start to pay off — you’ll be feeding little functions to array methods all the time.

Even handier is map, which loops through an array and builds a brand-new array from the results:

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);

console.log(doubled);   // [2, 4, 6]

map takes each number, runs your function on it, and gathers the returned values into a new array. Here it doubles every number. map is one of the most-used tools in real-world JavaScript — any time you want to turn one list into another (an array of prices into an array of formatted strings, an array of data into an array of HTML, and so on), map is the tool you reach for.

A practical example

Let’s bring loops together with the array-of-objects pattern from the last article and calculate a cart total:

const items = [
  { name: "Keyboard", price: 250000 },
  { name: "Mouse", price: 120000 },
  { name: "Monitor", price: 1500000 },
];

let total = 0;

for (const item of items) {
  total += item.price;
}

console.log(total);   // 1870000

The loop visits each product object, and total += item.price adds its price to a running tally. By the time the loop finishes, total holds the sum of all the prices. This pattern — loop through a list, then accumulate or process each item — is one of the most common things you’ll do in real programming. Summing prices, displaying products, filtering a list: it almost always starts with a loop.

Wrapping up

Loops let your code handle data of any size without repeating yourself:

• The for loop uses three parts — start, condition, step (for (let i = 0; i < n; i++)) — and is ideal when you need the index.
• The while loop repeats while a condition is true; use it when the count isn’t known in advance. Always ensure it can stop, or you get an infinite loop.
• for...of is the clean modern way to visit each item of an array directly, with no counter.
• Array methods forEach (do something per item) and map (build a new transformed array) loop for you and are everywhere in modern code.
• Looping through an array of objects to process or total each item is a core everyday pattern.

You now have all the core building blocks of programming in hand: variables, types, operators, conditionals, functions, arrays, objects, and loops. The last two articles turn outward and connect this logic to the actual web page. First up is the DOM, which lets JavaScript read and change the HTML on a page. That’s where everything you’ve learned so far starts to visibly affect what the user sees.