Iterate JavaScript Array In Different Ways

JavaScript Array Iteration

This is a quick tutorial explaining different ways to loop through an array in JavaScript. It’s for all people looking for a foreach loop in JavaScript. Well, most of the people find themselves in trouble when asked for a JavaScript Array Iteration. Unlike most of the other programming languages, looping through an array in Javascript follows quite different approaches. Let’s find out these different approaches.

Iterate An Array Using For Loop

The simplest way to iterate through a JavaScript Array is to use the for loop that will run in a numbering sequence. A normal array is basically indexed and we can, therefore, utilize these indexes to play with each iterate. You can do array iteration like this in most of the other programming languages as well.

arr = ["Gurmeet","Smart","Intelligent"];
for(i=0;i<arr.length;i++){
console.log(arr[i]);
}

In the above, basically we’re iterating from index 0 to index 2. So, the value of i goes like 0, 1 and 2 and then the control comes out of the loop. Here, we’re getting the length of the array using the length property of the array.

JavaScript For Loop Iteration

arr.length will give 3 in the above case as the length of the array is 3.

There’s one more cool way to do so and here you need not to explicitly provide the length of the array in the for loop condition.

arr = ["Gurmeet","Smart","Intelligent"];
for(x in arr){
console.log(arr[x]);
}

Loop Through A JavaScript Array Using For Loop

Here, x for each iteration will be the index of the array. Isn’t it interesting and easy?

Loop Through An Array Using Array.prototype.forEach

This is one of the other approaches of iteration in javascript in which you can get the index as well as the value for each iteration as returning function arguments.

arr = ["Gurmeet","Smart","Intelligent"];
arr.forEach(function (item, index) {
console.log(item, index);
});

JavaScript ForEach Loop Array

Using While Loop

Javascript Array Iteration can be done using a while loop also. The approach is the same as the numbered for loop.

arr = ["For","While","Do While"];
i = 0;
while (i < arr.length) {
console.log(arr[i]);
i++;
}

Output.

Do While Array Iteration JavaScript

Well, there’s nothing special or new about the while loop approach, but you can still it be useful according to your programming logic.

Map Function For Iterative Array Calculations

You can perform an operation one each array element using map function in JavaScript.

arr = [“For”,”While”,”Do While”];
length = x => x.length
lengths = arr.map(length);
console.log(arr);
console.log(lengths);

In the above, we’re basically mapping each element of the array to find out the length of each element and then we’re storing the length of each element in another array. The output of the code is shown in the following screenshot.

JavaScript Iteration With Mapping

Checking A Condition For All Array Elements Without Iteration

This is a bonus tip for all visitors to this article. If you want to see if a condition is true or false with respect to all elements of the array, you can opt for this approach rather than looping through each element of the complete array.

In the following example code, we have an integer array in which except one element i.e. 250, all others are less than 100.

arr = [50, 23, 67, 85, 10, 250 ];
condition = x => x < 100;
if (arr.every(condition)) {
console.log('Every element is less than 100');
}
else {
console.log('Not All Elements are less than 100');
}

This code is going to execute the else block if one or more elements of the array are not less than 100. But if all the elements will be less than 100, then it is going to print the statement written in the if block. Both the aspects when the condition is true and when it is false are illustrated in the following output screenshot.

Every Method In JavaScript For Array

Related Articles.

Leave a Reply

Your email address will not be published. Required fields are marked *