How to Loop Through an Array in JavaScript

By the end of this page, you will understand how to loop through arrays in JavaScript using for, for...of, forEach, and related methods. You will also learn when to use each approach, how they behave, and which beginner mistakes to avoid.

In JavaScript, arrays hold ordered collections of values, and looping lets you process each value one at a time. This is one of the most common tasks in programming.

Java has an enhanced for loop for iterating over array elements. JavaScript has a similar feature with for...of, but it also offers several other common patterns:

• A classic for loop when you need the index
• for...of when you want each value directly
• forEach() when you want to run a function for every item
• map(), filter(), and reduce() when you want to transform or process data functionally

This matters because choosing the right loop makes code:

• easier to read
• less error-prone
• more expressive
• better suited to the task

For example, if you only want to print every item, for...of is simple. If you want to build a new array, map() is often better than manually pushing values inside a loop.

Think of an array like a row of labeled boxes:

• box 0 contains "Hello"
• box 1 contains "World"

A loop is like walking past each box and looking inside.

Different loop styles change how you walk:

• for = you walk by box number: 0, 1, 2...
• for...of = you just pick up each value one by one
• forEach() = you hand each item to a helper function

So if Java's enhanced for loop says, “give me each element,” JavaScript's for...of says almost the same thing.

Common ways to loop through an array

1. for...of — closest to Java's enhanced for

const myStringArray = ["Hello", "World"];

for (const s of myStringArray) {
  console.log(s);
}

This prints each value directly:

• Hello
• World

Use this when you want the items and do not need the index.

2. Classic for loop

const myStringArray = ["Hello", "World"];

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

Use this when you need:

• the index
• more control over start, stop, or step size

3.

Consider this example:

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

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

Here is what happens step by step:

1. fruits is created as an array with 3 values.
2. The loop starts: for (const fruit of fruits).
3. On the first iteration, fruit becomes "apple".
4. console.log(fruit) prints apple.
5. On the second iteration, fruit becomes "banana".
6. console.log(fruit) prints banana.
7. On the third iteration, fruit becomes "cherry".
8. console.log(fruit) prints cherry.

Looping through arrays appears everywhere in JavaScript code.

Common examples

Rendering a list of products

const products = ["Keyboard", "Mouse", "Monitor"];

for (const product of products) {
  console.log(`Product: ${product}`);
}

Validating user input values

const fields = ["email", "password", "username"];

fields.forEach((field) => {
  console.log(`Checking ${field}`);
});

Converting API data

const prices = [10, 20, 30];
const formatted = prices.map((price) => `$${price.toFixed()}`);

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

Common patterns

Use for...of for readable iteration

for (const item of items) {
  processItem(item);
}

This is common when code needs to:

• read each item
• stop early with break
• skip items with continue

Use forEach() for simple side effects

items.forEach((item) => logItem(item));

This is often used for:

• logging
• updating state
• calling a helper for every item

Use map() for transformation

const names = users.map((user) => user.name);

1. Using for...in for array values

for...in loops over property names, not the actual values.

const arr = ["Hello", "World"];

for (const x in arr) {
  console.log(x);
}

Output:

0
1

This gives indexes as strings, not the array items.

Better:

for (const x of arr) {
  console.log(x);
}

2. Off-by-one errors in classic for loops

Broken code:

const arr = ["a", "b", "c"];

for (let i = 0; i <= arr.; i++) {
  .(arr[i]);
}

Quick reference

Loop through values

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

Loop through indexes and values

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

Use forEach()

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

Create a new transformed array

const newArray = array.map((item) => item * 2);

Rules to remember

• for...of iterates over values
• iterates over keys/property names

Can JavaScript do the same kind of array loop as Java's enhanced for loop?

Yes. The closest equivalent is for...of.

What is the best way to loop through an array in JavaScript?

It depends on the goal:

• use for...of for simple value iteration
• use for when you need the index
• use forEach() for simple side effects
• use map() when creating a new array

Should I use for...in for arrays in JavaScript?

Usually no. for...in is for property names, not normal array value iteration.

How do I get both index and value while looping?

Use either a classic for loop or forEach((value, index) => ...).

Can I stop a forEach() loop early?

No. If you need to stop early, use for, for...of, or methods like some() or find() depending on the problem.

• Arrays — Looping is most commonly used to process array elements.
• Objects — for...in is more closely related to iterating object keys.
• Functions — Methods like forEach() and map() take callback functions.
• Arrow functions — Often used with forEach(), map(), and other array methods.
• Array methods — Methods such as map(), filter(), and reduce() are alternatives to manual loops.
• Control flow — Loops, break, continue, and conditionals work together.
• Iteration protocols — for...of works with iterable values, including arrays, strings, and more.