How to loop through array JavaScript ES6

JavaScript

In this post, we will learn how to loop through an array in JavaScript ES6.We will cover loop through array using for loop,while loop,for in loop and ES6 loop for of ,for each,array.filter(), array.map() in ES5,array.some() with example.We will cover 8 ways to loop through array JavaScript ES6.

1. loop through array JavaScript using for loop

In this example, we use for loop to loop through an array in Javascript. We have started the loop from index =0 till to array. length and on each iteration increasing the value of the index. Let us understand with the below examples.

var myArr = ["dev","JavaScript","data","value"];

for (indx = 0; indx < myArr.length; indx++) {
    console.log(myArr[index]);
}

Output

dev
JavaScript
data
value

2. loop through array JavaScript using while loop

In this example, we have used a while loop to loop through the array. We have initialized the indx = 0 and run the loop till to array. length and on each iteration increasing the value of indx ++.

var myArr = ["dev","JavaScript","data","value"];
indx = 0;
while (indx < myArr.length) {
    console.log(myArr[indx]);
    indx++;
}

Output

dev
JavaScript
data
value

3.loop through array JavaScript using for in loop

In this example we are iterating through javascript array using for in loop

var myArr = ["dev","JavaScript","data","value"];


for (let indx in myArr) {
  console.log(myArr[indx] + " ");
}

Output

dev
JavaScript
data
value

4.loop over array using for-of loop

In this example we are using ES6 for-of loop to loop over an array.

var myArr = ["dev","JavaScript","data","value"];


for (let val of myArr) {
   console.log(val);  
}

Output

dev
JavaScript
data
value

5. loop through array JavaScript ES6 using foreach loop

The foreach loop is alternative of for in and for of loop. The foreach loop run a callabck function for each element of array with following parameters

  • value: The current array element values.
  • Index : The index of current element
  • array : optional array object to that current element belong.
var myArr = ["dev","JavaScript","data","value"];


myArr.forEach(function(element,index) {
    console.log(element,':',index);
});

Output

dev : 0
JavaScript : 1
data : 2
value : 3

6. Array.map() to Iterate over an array in JavaScript

The array.map() method is iterated over the element of the array and modifies elements of the array by applying some operation and returning the modified element as a new array. In this example we are using array.map() function to iterate over array and modified of array.

var myArr = ["dev","JavaScript","data","value"];
myArr  = myArr.map(element => {
   console.log('',element.toUpperCase())
})

Output

DEV
 JAVASCRIPT
 DATA
 VALUE

7.loop through array in Javascript by condition using some

Sometimes we have to iterate over the array and select elements based on condition to achieve this we have used the array.some() function to select elements from an array that starts with ‘Ja’

var myArr = ["DEV","JavaScript","Jadata","value",'JavaVariable'];


var eleStartsWith = myArr.some(ele=>ele.startsWith('Ja'))
console.log(eleStartsWith)

Output

True

8. iterate over an array in Javascript by condition

Another way to select the elements from the array by the condition is by using the array.filter() method.In this example we are filtering the elements that are start with ‘ja’.Let us understand with example.

var myArr = ["DEV","JavaScript","Jadata","value",'JavaVariable'];


myArr  = myArr.filter(ele=>ele.startsWith('Ja'))

console.log(myArr)

Output

[ 'JavaScript', 'Jadata', 'JavaVariable' ]

Summary

In this post we have learned How to loop through array JavaScript ES6 using for loop,while loop,for in loop and ES6 loop for of ,foreach,array.filter(), array.map() in ES5,array.some() with example.

Related Posts