JavaScript Iteration Techniques: Guide to different types of for

In the world of JavaScript development, iterating over arrays, objects, or collections is one of the most common operations. There are several techniques for doing so, each with its own purposes, advantages, and limitations. In this article, we'll look at four main methods:

the classic for with index
the forEach
the for...of
the for...in

We'll look at when to use each one, what the functional differences are, and the performance implications. Additionally, we'll include the output produced by each loop.

🔗 Do you like Techelopment? Check out the site for all the details!

1. Classic For (with index)

The classic for loop is the most traditional form of iteration in JavaScript. It offers the most control over the flow of the loop, making it ideal for scenarios where you need to access the index or change the increment logic.

const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) { 
console.log(array[i]);
}

Output:

✅ When to use:

When you need the index (i).
If you need to manually control the increment or loop on the contrary.
When you want to optimize performance to the maximum, especially in critical contexts.

⚡ Performance:

It is the most fastest and most optimized form, especially if you save array.length in a variable.

2. forEach

The forEach method provides a compact and readable syntax for iterating over arrays. It is particularly useful in declarative or functional contexts, where simplicity and clarity of code are a priority over fine-grained control over the loop.

const array = [1, 2, 3, 4, 5];
array.forEach((element, index) => {
console.log(element, index);
});

Output:

✅ When to use it:

When you work with arrays and want to write readable code.
When you don't need it break the loop (break or continue are not allowed).
Great in functional contexts.

⚡ Performance:

Slower than classic for because of the callback.
Acceptable for small to medium arrays.

3. for...of

Introduced with ECMAScript 2015 (ES6), the for...of loop allows you to easily iterate over any iterable object, such as arrays, strings, Sets, and Maps. It's perfect when you only care about the value of each element, not its index.

const array = [1, 2, 3, 4, 5];
for (const value of array) {
console.log(value);
}

Output:

✅ When to use it:

Iterationand simple on arrays, strings, Set, Map.
If you don't need the index but only the values.
More readable than the classic for.

⚡ Performance:

More efficient than forEach, slightly less efficient than the classic for.

4. for...in

The for...in loop is designed to iterate over the enumerable properties of an object. Unlike the other techniques, it is designed for objects rather than arrays, and can also return inherited properties, so it should be used with caution.

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) { 
console.log(`${key}: ${obj[key]}`);
}

Output:

a: 1
b: 2
c: 3

✅ When to use it:

For objects (and only objects).
To get the keys enumerable.

⚠️ Limitations:

Do not use with arrays.
Key order not guaranteed.

⚡ Performance:

Slower and includes inherited properties: use with caution.

Direct Comparison

Technical	Supports `break`?	Best for	Performance	Supports index?
`for` classic	✅	Array, manual controls	⭐⭐⭐⭐⭐	✅
`forEach`	❌	Readable arrays	⭐⭐	✅
`for...of`	✅	Iterables (array, set)	⭐⭐⭐⭐	❌
`for...in`	✅	Objects	⭐⭐	Keys

Conclusion

Choosing the right technique to perform a for in JavaScript depends on the data type, the need for control and the performance required. Use the classic for for performance and control. forEach for readable code. for...of for iterables where the value is enough. for...in for objects (carefully).

Knowing how to choose the right loop makes your code more efficient, readable and correct.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog