JavaScript Loop Through Array Guide

Arrays are a fundamental part of JavaScript. You will often need to go through each item in an array. This is called looping or iterating.

This guide shows you the best ways to loop through an array. It is for beginners. It uses short examples. You will learn the most common methods.

Why Loop Through an Array?

Looping lets you work with every element. You can read values, change them, or create new data. Without loops, you would have to write code for each item manually. That is not practical for large arrays.

Understanding how to loop through an array is a key skill. It helps you write clean and efficient code.

The Classic for Loop

The for loop is the most traditional way. It gives you full control. You set a counter, a condition, and an increment.

This method is fast and works in all browsers. It is great when you need the index of each item.

 
// Example of a for loop
let colors = ['red', 'green', 'blue'];

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

red
green
blue

The loop starts at index 0. It runs until i is less than the array length. Each time, it prints the current color.

You can also use this to modify the original array. It is a reliable tool for many tasks.

The for...of Loop

The for...of loop is newer. It is simpler to read. You do not need to manage an index variable.

This loop gives you each value directly. It is perfect when you only need the items, not their positions.

 
// Example of for...of loop
let numbers = [10, 20, 30];

for (let num of numbers) {
    console.log(num);
}

10
20
30

This code is cleaner. It reduces the chance of errors. Use it when you want to read values from an array without changing them.

The forEach() Method

The forEach() method is a built-in array function. It takes a callback function. The callback runs for every element.

It is very readable. You can use it to perform an action on each item. It does not return a new array.

 
// Example of forEach method
let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit) {
    console.log('I like ' + fruit);
});

I like apple
I like banana
I like cherry

The forEach() method is great for side effects. You can log data, update the DOM, or save to a database. It is a favorite for many developers.

The map() Method

The map() method creates a new array. It transforms each element. The original array stays the same.

This is perfect for converting data. You take one array and produce another with modified values.

 
// Example of map method
let prices = [5, 10, 15];
let discounted = prices.map(price => price * 0.9);

console.log(discounted);

[4.5, 9, 13.5]

The map() method is pure. It does not change the input array. It returns a new array with the same length. Use it for array transformations.

The filter() Method

The filter() method creates a new array. It keeps only elements that pass a test. The test is a function that returns true or false.

This is ideal for selecting data. You can find all items that match a condition.

 
// Example of filter method
let ages = [12, 18, 25, 8, 30];
let adults = ages.filter(age => age >= 18);

console.log(adults);

[18, 25, 30]

The filter() method is very useful. It helps you extract subsets of data from an array.

The reduce() Method

The reduce() method reduces an array to a single value. It uses an accumulator. You define how to combine values.

It is powerful for calculations. You can sum numbers, concatenate strings, or build objects.

 
// Example of reduce method
let scores = [80, 90, 100];
let total = scores.reduce((sum, score) => sum + score, 0);

console.log(total);

270

The reduce() method is flexible. It can do the work of map and filter together. It is a bit harder to learn but very valuable.

The some() and every() Methods

The some() method checks if at least one element passes a test. It returns true or false. The every() method checks if all elements pass the test.

These are great for validation. You can quickly check conditions on an array.

 
// Example of some and every
let temperatures = [30, 35, 40];

let hasHot = temperatures.some(temp => temp > 38);
let allWarm = temperatures.every(temp => temp > 25);

console.log(hasHot);   // true
console.log(allWarm);  // true

true
true

Use some() to find if any item meets a condition. Use every() to confirm all items meet it.

Choosing the Right Method

Each method has a purpose. Here is a quick guide:

• Use for when you need full control or the index.
• Use for...of for simple value reading.
• Use forEach() for side effects like logging.
• Use map() to transform every element.
• Use filter() to select elements.
• Use reduce() to combine values into one.
• Use some() or every() for boolean checks.

Always consider readability. Write code that is easy to understand. Your future self will thank you.

For more details on working with arrays, check our JavaScript Array Length Guide. It helps you avoid common mistakes.

Common Mistakes to Avoid

Beginners often make errors. Here are a few to watch out for:

Forgetting the index in a for loop. Always start at 0. Use array.length as the limit.

Modifying the array while looping. This can cause unexpected behavior. It is safer to create a new array.

Using the wrong method. Do not use map() if you only want side effects. Use forEach() instead.

Not returning a value in map() or filter(). Always return something from the callback.

Learning from mistakes is part of the journey. Practice with small examples. You will improve quickly.

Review our JavaScript Array Variables Guide for tips on declaring and using arrays correctly.

Performance Considerations

For most tasks, any method works fine. Modern JavaScript engines are fast. However, there are some points to know:

The for loop is often the fastest. The forEach() method is slightly slower but more readable. The map() and filter() methods create new arrays. This uses more memory.

For very large arrays, consider performance. Use a for loop for critical code. For typical apps, readability matters more.

You can learn more about efficient coding in our JavaScript Array Methods Guide.

Conclusion

Looping through arrays is a core JavaScript skill. You have many tools. The for loop gives control. The for...of loop is simple. The forEach(), map(), filter(), and reduce() methods are powerful.

Practice each method. Start with small arrays. Try to use the right tool for each job. This will make your code cleaner and easier to maintain.

Arrays are everywhere in JavaScript. Mastering loops will help you build better applications. Keep coding and experimenting.