How to Iterate Over Array in JavaScript: Simple Methods Explained

To iterate over an array in JavaScript, you can use a for loop, forEach() method, or other looping methods like for...of. These let you access each item in the array one by one to perform actions or calculations.

Syntax

Here are common ways to loop through an array:

• for loop: Runs code for each index from 0 to array length minus one.
• forEach method: Calls a function for each element in the array.
• for...of loop: Loops directly over array elements.

javascript

const array = [10, 20, 30];

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

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

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

Output

10
20
30
10
20
30
10
20
30

Example

This example shows how to print each number in an array using different iteration methods.

javascript

const numbers = [1, 2, 3, 4, 5];

// Using for loop
for (let i = 0; i < numbers.length; i++) {
  console.log(`Number at index ${i}: ${numbers[i]}`);
}

// Using forEach
numbers.forEach((num, index) => {
  console.log(`forEach - Number at index ${index}: ${num}`);
});

// Using for...of
for (const num of numbers) {
  console.log(`for...of - Number: ${num}`);
}

Output

Number at index 0: 1
Number at index 1: 2
Number at index 2: 3
Number at index 3: 4
Number at index 4: 5
forEach - Number at index 0: 1
forEach - Number at index 1: 2
forEach - Number at index 2: 3
forEach - Number at index 3: 4
forEach - Number at index 4: 5
for...of - Number: 1
for...of - Number: 2
for...of - Number: 3
for...of - Number: 4
for...of - Number: 5

Common Pitfalls

Common mistakes when iterating arrays include:

• Using for...in which loops over keys and can include inherited properties, not recommended for arrays.
• Modifying the array while looping can cause unexpected behavior.
• Forgetting to check array length in for loops can cause errors.

javascript

const arr = [1, 2, 3];

// Wrong: using for...in (loops keys, not values)
for (const key in arr) {
  console.log(arr[key]);
}

// Right: use for...of to get values
for (const value of arr) {
  console.log(value);
}

Output

1
2
3
1
2
3

Quick Reference

Summary of array iteration methods:

Method	Description	Use Case
for loop	Classic loop using index	When you need index or to break/continue
forEach()	Calls function for each element	Simple iteration without breaking
for...of	Loops over values directly	Clean syntax for values, supports break
map()	Transforms array to new array	When you want to create a new array
for...in	Loops over keys (not recommended for arrays)	Avoid for arrays, used for objects

Key Takeaways

Use for, forEach, or for...of loops to iterate arrays safely and clearly.

Avoid for...in loops for arrays as they iterate keys, not values.

forEach does not support break or continue; use for or for...of if needed.

Always check array length in for loops to avoid errors.

Modifying an array while iterating can cause unexpected results.