How to loop through an array in JavaScript

1for...of (and entries() for the index)Recommended

for...of (ES2015) walks the values of anything iterable: arrays, strings, Maps, Sets. Declare the loop variable with const unless you reassign it inside the body. There is no index by default. When you need one, entries() yields [index, value] pairs, and array destructuring unpacks each pair into two names.

const languages = ["JavaScript", "Python", "Go"];

for (const language of languages) {
  console.log(language);
}

// Need the index too? Loop over entries() and destructure the pair.
for (const [index, language] of languages.entries()) {
  console.log(index, language);
}

// break and continue work, because this is a real loop.
for (const language of languages) {
  if (language === "Python") continue;
  if (language === "Go") break;
  console.log("kept:", language);
}

Prints JavaScript, Python, Go, then 0 JavaScript, 1 Python, 2 Go, and finally kept: JavaScript: continue skipped Python and break stopped the loop at Go. entries() returns an iterator, not an array, so it doesn't copy the list. For const a = ["x", "y"], logging a.entries() shows Object [Array Iterator] {}, and spreading it with [...a.entries()] gives [ [ 0, 'x' ], [ 1, 'y' ] ]. Inside an async function, for...of is also the loop that works with await: each iteration waits for the previous one to finish.

2forEach() with the index argument

forEach() calls your function once per element and passes it three arguments: the value, the index and the array itself. Take only the ones you need. It reads well at the end of a chain of array methods, but it is a function call rather than a loop, which changes two things: return ends only the current callback, so it behaves like continue, and forEach itself always returns undefined.

const prices = [4.5, 12, 7.25];

// The callback gets (value, index, array).
prices.forEach((price, index) => {
  console.log(`${index + 1}. $${price.toFixed(2)}`);
});

// return inside the callback only skips to the next item, like continue.
prices.forEach((price) => {
  if (price > 10) return;
  console.log("under 10:", price);
});

// forEach always returns undefined, so it cannot be chained.
const result = prices.forEach((price) => price * 2);
console.log(result);

Prints 1. $4.50, 2. $12.00, 3. $7.25, then under 10: 4.5 and under 10: 7.25 (the return skipped 12), then undefined. That last line is the classic mistake: if you are building a new array, you wanted map() (or filter()), which returns one. Two more limits: forEach does not wait for async callbacks, so an await inside it doesn't pause the loop, and there is no way to stop it early. The next section covers what to use instead.

3Stopping early: break, find() and some()

You cannot break out of forEach. The keyword is only legal inside a loop, and a callback isn't one, so writing it there is a parse error: SyntaxError: Illegal break statement. You have two good options. Use for...of and break. Or use the array method that already describes the search: find() and findIndex() stop at the first match, some() stops at the first true, and every() stops at the first false.

const readings = [12, 7, 30, 4, 22];

// for...of: break out the moment you find what you need.
for (const [i, value] of readings.entries()) {
  if (value > 25) {
    console.log("first reading over 25 is at index", i);
    break;
  }
}

// Array methods that stop early on their own.
console.log(readings.find((value) => value > 25));
console.log(readings.findIndex((value) => value > 25));
console.log(readings.some((value) => value < 5));
console.log(readings.every((value) => value > 5));

// Proof that some() stops: count how many items it looked at.
let checked = 0;
readings.some((value) => {
  checked++;
  return value > 25;
});
console.log("some() checked", checked, "of", readings.length);

// forEach has no way out: a break here is a SyntaxError, and return
// only ends the current callback, so all five items are still visited.
let visited = 0;
readings.forEach((value) => {
  visited++;
  if (value > 25) return;
});
console.log("forEach visited", visited, "of", readings.length);

Prints first reading over 25 is at index 2, then 30, 2, true (4 is under 5) and false (4 is not over 5). The counters show the difference: some() checked 3 of 5 but forEach visited 5 of 5. find() returns undefined and findIndex() returns -1 when nothing matches. Old answers suggest throwing an exception inside forEach and catching it outside. That does stop the loop, but it uses an error for ordinary control flow. Use for...of instead.

4The classic for loop: backwards, steps and writing back

for (let i = 0; i < items.length; i++) is the C-style loop, and it predates everything above. For a plain forward walk, for...of is shorter and can't go off by one. The index loop is still the right answer when the index doesn't just count 0, 1, 2: walking backwards, stepping by two, or assigning items[i] in place. Use let, not var, so i belongs to the loop and each closure created inside it gets its own copy.

const primes = [2, 3, 5, 7, 11];

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

// Backwards -- the usual reason to reach for this form.
const backwards = [];
for (let i = primes.length - 1; i >= 0; i--) {
  backwards.push(primes[i]);
}
console.log(backwards);

// Any step you like.
const everyOther = [];
for (let i = 0; i < primes.length; i += 2) {
  everyOther.push(primes[i]);
}
console.log(everyOther);

// Writing back into the array goes through the index.
for (let i = 0; i < primes.length; i++) {
  primes[i] *= 10;
}
console.log(primes);

The first loop prints 0 2 through 4 11. The backwards walk collects [ 11, 7, 5, 3, 2 ], the stepped one [ 2, 5, 11 ], and the last loop leaves [ 20, 30, 50, 70, 110 ]. Changing the const array's elements is allowed, because const only stops the name from being reassigned. You will also see old code that caches items.length in a variable before the loop. Modern engines make that unnecessary, and reading .length on each pass means the loop notices if the array shrinks.

5Why for...in is a bad idea for arrays

for...in enumerates an object's property keys. Arrays are objects whose indexes happen to be keys, so it seems to work, but it has three problems. The keys are strings, so i + 1 concatenates. It visits every enumerable property, including ones someone added to the array and inherited ones (a library that patches Array.prototype leaks into every loop). And it skips holes in sparse arrays. Keep it for plain objects.

const colors = ["red", "green", "blue"];
colors.note = "extra property";

// for...in walks property KEYS, as strings -- including non-index ones.
for (const key in colors) {
  console.log(key, typeof key);
}

// So index arithmetic quietly turns into string concatenation.
for (const i in colors) {
  if (i === "note") continue;
  console.log(i + 1);
}

// for...of only ever gives you the elements.
for (const color of colors) {
  console.log(color);
}

// Holes in a sparse array: for...in and forEach skip them, for...of does not.
const sparse = [1, , 3];
const seenIn = [];
for (const key in sparse) seenIn.push(key);
const seenForEach = [];
sparse.forEach((value, i) => seenForEach.push(i));
const seenOf = [];
for (const value of sparse) seenOf.push(value);
console.log(seenIn, seenForEach, seenOf);

The first loop prints 0 string, 1 string, 2 string and note string. The extra property shows up as if it were an element. The second loop prints 01, 11, 21, not 1, 2, 3. for...of prints just red, green, blue. The last line is [ '0', '2' ] [ 0, 2 ] [ 1, undefined, 3 ]: for...in and forEach skip the hole at index 1, while for...of visits it as undefined. Looping over an object instead? Use Object.entries(obj) with for...of.

6Which should you use?