Best Ways to Loop Through an Array in JavaScript (for, forEach, for-of Explained)

Looping through arrays is one of the most common tasks in JavaScript programming. Developers often need to process data stored in arrays, and JavaScript provides several ways to do this efficiently. Modern JavaScript supports both traditional loops and newer, more expressive iteration methods introduced in ES5 and ES6. Choosing the right approach depends on the task, performance needs, and whether the code involves asynchronous operations.

Best Ways to Loop Through an Array in JavaScript for forEach for-of Explained

coldshadow44 on 2025-10-15

Comment

Showing comments related to this post.

_coldshadow44

2025-10-15

In JavaScript, there are multiple ways to loop through an array. Each method has its own advantages depending on whether you need performance, simplicity, or support for asynchronous logic. Below are the most effective and commonly used techniques.

1. Using for...of (Modern and Recommended)

The for...of loop, introduced in ES6, provides a clean and readable syntax for iterating through the values of an array. It works perfectly with async/await, making it a great choice for modern JavaScript.

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

for (const item of items) {

console.log(item);

}

This loop automatically retrieves each value from the array and is ideal for most use cases where you need sequential access to elements.

2. Using forEach() (Simple and Readable)

The forEach() method was introduced in ES5 and is available in all modern browsers. It calls a callback function for each element in the array.

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

items.forEach(item => {

console.log(item);

});

forEach() is great for simple, synchronous operations. However, it doesn’t work well with asynchronous code because it doesn’t wait for promises inside the callback to resolve.

3. Using the Classic for Loop

The traditional for loop remains one of the most powerful and flexible options, especially in performance-sensitive code. It gives you full control over the loop index and allows you to modify the iteration pattern.

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

for (let i = 0; i < items.length; i++) {

console.log(items[i]);

}

This approach is compatible with asynchronous operations using await, making it suitable for sequential async logic.

4. Using for...in with Caution

The for...in loop is primarily designed for iterating over object properties, not arrays. While it can work with arrays, it also loops through inherited properties, which can cause unexpected behavior. Use it only when you need to iterate over sparse arrays or custom properties added to an array.

const items = [];

items[2] = "apple";

for (const key in items) {

if (Object.hasOwn(items, key)) {

console.log(items[key]);

}

Always use checks like Object.hasOwn() to ensure you only process actual array elements.

5. Using Iterators Explicitly (Advanced)

Arrays in JavaScript have built-in iterators that you can use directly for fine-grained control over iteration. This is an advanced technique but can be useful in custom scenarios.

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

const iterator = items.values();

let next = iterator.next();

while (!next.done) {

console.log(next.value);

next = iterator.next();

}

This approach provides access to the iteration process itself, which can be helpful when building custom looping logic.

Bonus: Looping Through Array-Like Objects

Some objects, like NodeList or HTMLCollection, act like arrays but don’t have all array methods. You can still loop through them using most of the methods above or convert them into true arrays.

Example using Array.from()

const divs = Array.from(document.querySelectorAll("div"));

divs.forEach(div => console.log(div));

Example using Spread Syntax

const divs = [...document.querySelectorAll("div")];

divs.forEach(div => console.log(div));

Summary:

Use for...of for modern, clean, and async-friendly loops.
Use forEach() for simple synchronous iterations.
Use for loops for full control or performance-critical code.
Avoid for...in for arrays unless working with sparse or extended properties.
Convert array-like objects with Array.from() or spread syntax to use modern methods easily.

Ask. Code. Learn. Grow with the Developer Community.