How to Loop through an Array in JavaScript

In this tutorial, we’ll learn how to loop through elements of an Array using different ways in JavaScript.

for loop

The for is used to loop through an the index of an Array

const array = ["one", "two", "three"];

for(var i=0; i<array.length; i++){
  console.log(i, array[i]);
}

Output
0 one
1 two
2 three

for-in loop

The for-in statement loops through the index of an Array.

const array = ["one", "two", "three"];
for (const index in array){
    console.log(index, array[index]);
}

Output
0 one
1 two
2 three

Why for-in is risky for arrays. index here is a string ("0", "1", "2"), not a number, so array[index] works only because of implicit string-to-index coercion — code that expects index to support arithmetic (index + 1) will misbehave. Worse, for-in enumerates every enumerable property, including ones inherited through the prototype chain — not just numeric indices. If any code (yours or a library’s) has added a property to Array.prototype, it shows up in the loop too:

const array = ["one", "two", "three"];
Array.prototype.extra = "oops"; // some other script does this

for (const index in array) {
  console.log(index, array[index]);
}

Output
0 one
1 two
2 three
extra oops

This is why for-in is generally recommended for iterating object keys, not array elements — use for, for-of, or forEach() for arrays instead.

for-of loop

The for-of statement loops through the values of an Array.

const array = ["one", "two", "three"];
for (const element of array){
    console.log(element);
}

Output
one
two
three

Array.forEach()

The Array.forEach() method takes a callback function to loop through an Array. We can use ES6 arrow functions in callback.

const array = ["one", "two", "three"];

array.forEach((item, index) => console.log(index, item));

Output
0 one
1 two
2 three

Array.map()

Array.map() looks similar to forEach() — it also takes a callback and visits every element — but instead of just running side effects, it returns a new array built from the callback’s return values. The original array is left untouched:

const array = ["one", "two", "three"];

const upper = array.map(item => item.toUpperCase());

console.log(upper); // [ 'ONE', 'TWO', 'THREE' ]
console.log(array); // [ 'one', 'two', 'three' ] — unchanged

Use forEach() when you just need to do something with each element (logging, pushing into an outside array, updating the DOM). Use map() when you need a transformed array back — it’s built for that and chains cleanly with .filter() or .reduce() afterwards.

Stopping the Loop: break and continue

for, for-in and for-of all support break; (stop entirely) and continue; (skip to the next iteration) because they’re language-level loop statements:

const array = ["one", "two", "three"];

for (const element of array) {
  if (element === "two") break;
  console.log("kept", element);
}

Output
kept one

forEach() and map(), however, take a plain callback function — there is no loop statement for break/continue to attach to, so using either keyword inside the callback throws a SyntaxError. The only way to stop a forEach()/map() early is to throw from inside the callback and catch it outside, which is awkward enough that it’s usually a sign you should reach for for/for-of (or Array.some()/Array.every(), which do stop as soon as the callback returns a value that ends the search) instead.

That’s it! These are the different ways to loop through an Array in JavaScript. For plain iteration, forEach() with an arrow function keeps your code short and readable. For transforming elements into a new array, prefer map(). And if you need to break; or continue; partway through, drop down to a for, for-of, or (for objects, not arrays) for-in loop.