How to Loop Through an Array in JavaScript

By the end of this page, you will understand several ways to iterate over arrays in JavaScript, including for, for...of, and forEach(). You will also learn when to use each approach, how they behave, and which beginner mistakes to avoid.

In JavaScript, looping through an array means visiting each item one at a time so your code can read it, print it, transform it, validate it, or use it in some other operation.

Arrays are ordered collections, so iteration is one of the most common tasks in JavaScript. For example, you might:

• display a list of products
• calculate a total price
• validate form input values
• send data items to an API
• build a new array from an existing one

JavaScript provides multiple ways to loop through an array. The most common are:

• for loop
• for...of
• forEach()
• map() and filter() for transformation tasks

The main idea is simple: start at the first element, move through the array one element at a time, and stop when there are no more items.

This matters because iteration is everywhere in programming. Once you understand array loops, you can work with lists of users, files, messages, products, numbers, and many other kinds of data.

Think of an array like a row of numbered boxes on a shelf.

• Each box holds one value.
• The first box is at position 0.
• A loop is like walking past the shelf and looking into each box one by one.

Some loop styles make you track the box number yourself, while others simply hand you each item in order.

• A for loop says: “Start at box 0, then move to 1, then 2...”
• A for...of loop says: “Just give me each item, one at a time.”
• forEach() says: “Run this function once for every item.”

All three can process the same array, but they feel slightly different to write and use.

Common ways to loop through an array

1. Classic for loop

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

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

This uses an index variable i.

• Start at 0
• Continue while i < fruits.length
• Increase i by 1 each time
• Access each item with fruits[i]

2. for...of

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

for (const fruit of fruits) {
  console.(fruit);
}

Consider this example:

const numbers = [10, 20, 30];

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

Step-by-step

1. numbers is created:

   [10, 20, 30]
   

2. The loop starts with:

   let i = 0
   

3. JavaScript checks the condition:

   i < numbers.length
   

   Since numbers.length is 3, this becomes:

   0 < 3
   

   This is , so the loop runs.

Looping through arrays is used constantly in real JavaScript programs.

Rendering UI data

const products = ["Laptop", "Phone", "Tablet"];

products.forEach((product) => {
  console.log(`Render product: ${product}`);
});

This pattern is common when displaying lists in web apps.

Calculating totals

const prices = [10, 20, 30];
let total = 0;

for (const price of prices) {
  total += price;
}

console.log(total); // 60

Useful for shopping carts, reports, and analytics.

Validating data

const usernames = ["alice", "", "charlie"];

for (const username  usernames) {
   (username === ) {
    .();
  }
}

In real projects, developers choose array iteration styles based on intent.

Read-only processing

When code only needs to read each item, for...of is often the clearest choice.

for (const user of users) {
  console.log(user.email);
}

Index-based logic

If you need to compare neighboring items or update specific positions, a classic for loop is useful.

for (let i = 0; i < items.length; i++) {
  console.log(`Item ${i}:`, items[i]);
}

Validation with early exit

A classic for loop or for...of works well when you want to stop early.

for (const email of emails) {
  if (!email.includes()) {
    .();
    ;
  }
}

1. Using <= instead of <

Broken code:

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

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

Problem:

• fruits.length is 3
• Valid indexes are 0, 1, and 2
• fruits[3] is undefined

Fix:

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

2. Forgetting that array indexes start at 0

// Classic for loop
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

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

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

// map creates a new array
const newArray = array.map((item) => item * 2);

// filter keeps matching items
const filtered = array.filter((item) => item > 10);

Quick rules

• Arrays use zero-based indexes.
• Last valid index is array.length - 1.
• Use < array.length, not <= array.length.
• Use for...of for simple value iteration.

How do I loop through an array in JavaScript?

You can use a for loop, for...of, or forEach(). For simple value iteration, for...of is often the easiest to read.

What is the best way to iterate over an array in JavaScript?

It depends on your goal. Use for...of for readability, for for index control, and map() or filter() when creating new arrays.

Should I use forEach() or for...of?

Use forEach() when you want to run a callback for every item. Use for...of if you may need break, continue, or simpler control flow.

Why does my loop go out of bounds?

This usually happens when using <= array.length instead of < array.length. The highest valid index is array.length - 1.

• JavaScript arrays — Arrays are the data structure being iterated over.
• for loop — The classic loop structure for index-based iteration.
• for...of loop — A modern way to iterate over iterable values.
• forEach method — A built-in array method for running a callback on each element.
• map method — Useful when looping to create a transformed array.
• filter method — Useful when looping to keep only matching items.
• array length — Important for knowing when a loop should stop.
• zero-based indexing — Essential for correctly accessing array elements.