Looping over Arrays: for loop vs for-in loop vs forEach() loop vs for-of loop

When working with arrays in programming, one common task is iterating over the elements of an array. There are several ways to achieve this in different programming languages, each with its own syntax and characteristics. In this article, we will explore and compare four popular methods for looping over arrays: the traditional "for" loop, the "for-in" loop, the ".forEach()" method, and the "for-of" loop. Understanding the differences and use cases of these looping mechanisms can help developers write more efficient and readable code when working with arrays.

for loop:

for (let index=0; index < someArray.length; index++) 
{   
    const elem = someArray[index];   // ··· 
} 

for-in loop:

for (const key in someArray) 
{   
    console.log(key); 
} 

.forEach():

someArray.forEach((elem, index) => 
{   
    console.log(elem, index); 
}); 

for-of loop (Best Choice)

for (const elem of someArray) {   console.log(elem); } 

Looping over Arrays: for loop vs for-in loop vs forEach() loop vs for-of loop

Factor	for loop	for-in loop	forEach()	for-of loop
Iterate over	Index-based iteration	Property keys iteration	Array elements	Iterable Objects
Support await	No	No	No	Yes
Support break	Yes	Yes	No	Yes
Supports continue	Yes	Yes	No	Yes
Access to index	Explicit control over index	Implicit access through property key	No	Implicit access through iteration variable
Access to value	Explicit access through array[index]	Implicit access through array[key]	Implicit access through parameter in callback function	Implicit access through iteration variable
Speed	Fastest	Slower than for loop due to property key iteration	slower than for loop	Comparable to for loop
Readability	Moderate	Moderate	High	High
Usage with objects	Limited to iterating over object properties	Suitable for iterating over object properties	Not applicable	Limited to iterating over iterable objects
Starting index control	Possible by initializing index with a value other than 0	Not applicable	Not applicable	Not applicable

Let's go into detail.

1. for loop

The plain for loop in JavaScript has been around since ECMAScript 1. It allows iterating over an array by specifying an index variable and loop condition.

const arr = ['a', 'b', 'c']; 
arr.prop = 'property value';  
for (let index=0; index < arr.length; index++) 
{   
const elem = arr[index];   
console.log(index, elem); 
}  
// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'

In the above example, the for loop logs the index and value of each element of the array. It provides control over the iteration process, but it can be verbose for simple array looping tasks. However, it is useful when starting the loop from a specific index other than the first element.

The plain for loop in JavaScript offers both advantages and disadvantages:

Pros:

• The for loop is a versatile looping mechanism that allows for a wide range of loop control and customization options.

• It can be used not only for looping over arrays but also for iterating through other iterable objects or performing general loop operations.

• The for loop provides precise control over the loop index, allowing you to access specific array elements or execute loop iterations conditionally.

Cons:

• The for loop can become verbose, especially when the goal is simply to loop over an array. The need to manually manage the loop index and array length can lead to more code and potential for errors.

• The explicit index management in the for loop can make the code less readable, especially for simple array iterations.

Unique Capability:

• The for loop is useful if you want to start looping from a specific index in the array rather than the first element. This capability is not offered by other looping mechanisms, providing flexibility in array traversal.

2. for-in loop

The for-in loop is as old as the for loop and existed in ECMAScript 1. It is designed for iterating over object properties but can also be used for arrays. However, it visits the keys of the array rather than directly accessing the elements.

const arr = ['a', 'b', 'c']; 
arr.prop = 'property value';  
for (const key in arr) 
{   
console.log(key); 
}  
// Output:
// '0'
// '1'
// '2'
// 'prop'

In the given example, the for-in loop logs the keys of the array.

The for-in loop is not recommended for looping over arrays due to several reasons:

1. It iterates over property keys rather than the values of the array. This means that when using for-in, you will access the indices of the array rather than the actual elements.

2. As property keys, the indices of array elements are treated as strings, not numbers. This can lead to unexpected behavior or errors if you rely on numerical operations or comparisons within the loop.

3. The for-in loop visits all enumerable property keys, including both own and inherited properties of the array. This can result in unintended iteration over properties that are not directly related to the array elements.

However, the for-in loop can be useful when you need to iterate over all enumerable properties of an object, including both its own properties and those inherited from its prototype chain. In such cases, for-in provides a way to access and work with all the enumerable properties of the object, including array elements if they are part of the object's properties.

3. .forEach()

To address the limitations of the for and for-in loops for arrays, the .forEach() method was introduced in ECMAScript 5. It simplifies array looping by providing a callback function that is executed for each element of the array.

const arr = ['a', 'b', 'c']; 
arr.prop = 'property value';  
arr.forEach((elem, index) => {   
console.log(elem, index); 
}
);  
// Output:
// 'a', 0
// 'b', 1
// 'c', 2

In the provided example, the .forEach() method logs each element and its index. It is convenient and eliminates the need for explicit index management.

The .forEach() method is highly convenient as it provides easy access to both array elements and their indices without requiring much code. The introduction of arrow functions in ECMAScript 6 further enhanced the syntactical elegance of this method.

There are some limitations to be aware of when using .forEach().

1. You cannot use the await keyword within the body of this loop, which means it may not be suitable for certain asynchronous operations.

2. Unlike for loops, it does not offer a direct mechanism to break out of the loop prematurely. This limitation can be problematic if you need to stop the iteration based on a specific condition.

Although .forEach() does not directly support breaking the loop, a workaround exists using the .some() method. If the callback function within .some() returns a truthy value, it stops the iteration.

const arr = ['red', 'green', 'blue']; 
arr.some((elem, index) => {   
if (index >= 2) 
{     
return true; 
// break from loop   
}   
console.log(elem);   
// This callback implicitly returns `undefined`, which
// is a falsy value. 

In the given example, .some() is used to break the loop when the index reaches a specific value. While this workaround allows breaking the loop, it may be considered an abuse of .some() and may make the code less understandable compared to other alternatives.

4. for-of loop

The for-of loop was introduced in ECMAScript 6 and provides a concise and convenient way to loop over arrays. It directly iterates over the elements of the array without the need for index management.

const arr = ['a', 'b', 'c']; 
arr.prop = 'property value';  
for (const elem of arr) 
{   
console.log(elem); 
} 
// Output:
// 'a'
// 'b'
// 'c'

The for-of loop is particularly suitable for iterating over arrays due to the following advantages:

1. The for-of loop directly iterates over the elements of an array, providing a concise and intuitive syntax for accessing each element individually.

2. Unlike the .forEach() method, the for-of loop allows the use of the await keyword within its body, making it compatible with asynchronous operations and enabling better handling of promises.

3. The for-of loop supports the use of break and continues statements, allowing for control flow manipulation within the loop. This means you can prematurely exit the loop using break or skip an iteration using continue, even for outer scopes if necessary.

for-of and iterable objects

An additional benefit of the for-of loop is that it can be used to loop over any iterable object, not just arrays. For example, it can iterate over Map objects.

const myMap = new Map()   
.set(false, 'no')   
.set(true, 'yes') ; 
for (const [key, value] of myMap) 
{   
console.log(key, value); 
}  
// Output:
// false, 'no'
// true, 'yes'

In the given example, a Map object is iterated, and each [key, value] pair is logged by destructuring. This allows convenient access to the components of each pair during iteration.

for-of and Array indices

The Array method .entries() returns an iterable of [index, value] pairs. By using for-of and destructuring with this method, it provides easy access to array indices. In the provided example, the for-of loop with arr.entries() logs the index and element of the array.

const arr = ['chocolate', 'vanilla', 'strawberry'];
  
for (const [index, elem] of arr.entries()) 
{   
console.log(index, elem); 
} 
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'

This approach allows direct access to both the index and element of each array item during iteration.

Conclusion

When it comes to looping over arrays, developers have multiple options to choose from. The traditional "for" loop, the "for-in" loop, the ".forEach()" method, and the "for-of" loop each have their own strengths and use cases. Consider the specific requirements of your code and the desired behavior to select the most appropriate looping mechanism. By understanding the differences and capabilities of these looping methods, you can write efficient and effective code when working with arrays in your programming projects.