How to Loop Through an Array in JavaScript

What you’ll build or solve

You’ll loop through arrays using the most common JavaScript approaches.

When this approach works best

Looping through an array works best when you:

• Display items in a list or table.
• Transform data before sending it to an API.
• Search for a value inside a collection.
• Calculate totals, counts, or derived values.

Avoid manual loops when a built-in method like map() or filter() better expresses your intent. Clear intent improves readability and reduces bugs.

Prerequisites

• A browser console or Node.js
• Basic understanding of arrays and variables

No additional setup is required.

Step-by-step instructions

Step 1: Use for for full control

The classic for loop gives you access to the index and allows early exit.

constnumbers= [10,20,30];

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

Use this when you need the index or want to break out early.

What to look for:

• i starts at 0.
• The condition must use < numbers.length to avoid out-of-bounds access.

Step 2: Use for...of for simple value iteration

for...of is cleaner when you only need the value.

constnumbers= [10,20,30];

for (constnumofnumbers) {
console.log(num);
}

Use this for reading values without caring about indexes.

What to look for:

• for...of works directly with iterable objects like arrays.
• No index is provided automatically.

Step 3: Use forEach() for side effects

forEach() runs a function for every element.

constnumbers= [10,20,30];

numbers.forEach((num,index) => {
console.log(index,num);
});

Use this when you want to execute code for each item without returning a new array.

What to look for:

• forEach() does not support break or early exit.
• It always processes every element.

Step 4: Use map() when creating a new array

map() transforms each item and returns a new array.

constnumbers= [1,2,3];

constdoubled=numbers.map(num =>num*2);
console.log(doubled);

Use this when the goal is transformation, not just iteration.

What to look for:

• map() returns a new array.
• The original array remains unchanged.

Step 5: Use for...in carefully

for...in loops over keys, not values.

constnumbers= [10,20,30];

for (constindexinnumbers) {
console.log(index,numbers[index]);
}

Use this mainly for objects. Avoid it for arrays in most cases because it can iterate over inherited properties.

Examples you can copy

Example 1: Display items in a list

constitems= ["Apple","Banana","Orange"];

for (constitemofitems) {
console.log("Item:",item);
}

Example 2: Calculate a total

constprices= [5,10,15];

lettotal=0;

for (constpriceofprices) {
total+=price;
}

console.log(total);

Example 3: Create formatted strings

constusers= ["Alex","Sam","Taylor"];

constgreetings=users.map(name =>`Hello,${name}`);

console.log(greetings);

Example 4: Find a specific value and stop early

constnumbers= [3,7,12,18];

for (leti=0;i<numbers.length;i++) {
if (numbers[i]>10) {
console.log("Found:",numbers[i]);
break;
  }
}

Common mistakes and how to fix them

Mistake 1: Using forEach() when you need to stop early

What you might do:

constnumbers= [1,2,3,4];

numbers.forEach(num => {
if (num===3) {
return;
  }
console.log(num);
});

Why it breaks:

return only exits the callback, not the loop. The loop continues.

Correct approach:

for (constnumofnumbers) {
if (num===3) {
break;
  }
console.log(num);
}

Mistake 2: Using for...in for arrays

What you might do:

for (constkeyinnumbers) {
console.log(numbers[key]);
}

Why it breaks:

for...in iterates over property names and can include inherited keys.

Correct approach:

for (constvalueofnumbers) {
console.log(value);
}

Mistake 3: Off-by-one error in for loops

What you might do:

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

Why it breaks:

<= accesses one index beyond the array.

Correct approach:

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

Troubleshooting

• If you see undefined, check your loop condition for <= instead of <.
• If the loop never stops, confirm your condition updates correctly.
• If you cannot break early, switch from forEach() to for or for...of.
• If you get TypeError: ... is not iterable, confirm the variable is an array.

Quick recap

• Use for when you need index control or early exit.
• Use for...of for clean value iteration.
• Use forEach() for side effects.
• Use map() when transforming into a new array.
• Avoid for...in for arrays.