Loop through an array in JavaScript

By: Rajesh P.S.

Looping through an array in JavaScript involves iterating over its elements to perform certain operations. There are several methods available for looping through arrays. Let's discuss some of them with examples and identify the best one based on the scenario.

For Loop

The traditional for loop can be used to iterate through an array.

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

For...of Loop

The for...of loop is a more concise way to iterate over the values of an array.

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

forEach() Method

Continue Reading...

The forEach() method is specifically designed for arrays and provides a cleaner way to loop through elements.

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

Map() Method

The map() method creates a new array by applying a function to each element of the existing array.

const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map(number => number * 2); console.log(doubledNumbers);

Reduce() Method

The reduce() method is used to accumulate a value by applying a function to each element of the array.

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((total, number) => total + number, 0); console.log(sum);

Fastest way to loop through an array in JavaScript

The choice of the best method depends on the scenario. If you need to perform a simple iteration, the for...of loop or the forEach() method are clean and effective. If you need to transform elements, the map() method is useful. For aggregating values, the reduce() method is suitable.

The forEach() method is often favored for its readability and explicit focus on array elements. However, if you need more control over the iteration process or if you're dealing with complex transformations or aggregations, other methods like for loops, for...of loops, or reduce() might be more appropriate.

Why is using "for...in" for array iteration a bad idea?

There are many reason that you should not use "for...in" .

Inherited properties are also enumerated

JavaScript for...in statement will go up in the prototype chain, also enumerating over inherited properties, a thing that sometimes is not desired.

Array.prototype.myProp = "Bad Idea"; var array = ['one', 'two', 'three']; for (var i in array) { console.log(array[i]); }

Output:

one two three Bad Idea

From the above example you can understand that it can be particularly a problem if you use some library that relies heavily on native prototypes augmentation.

It's construct

var myVar = []; myVar[5] = 5; for (var elem in myVar) { console.log(elem); }

Output:

From the above output, you can see the for..in loop shows only the explicitly set index of "5", and ignores 0-4.

In normal JavaScript for loop , iterate over numeric indexes from 0 to 5, as everyone expects.

var myVar = []; myVar[5] = 5; for (var i = 0; i < myVar.length; i++) { console.log(myVar[i]); }

Output:

undefined undefined undefined undefined undefined 5

It's slow

It's slow because you have to walk all properties of the array object and its whole prototype chain and will still only get the property's name, ie to get the value, an additional lookup will be required

Conclusion

Ultimately, the "best" method depends on the specific use case and the clarity it brings to your code.

Next > How to Remove a Specific Item from an Array in JavaScript

Related Topics

More Related Topics.....