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
- Loop through array object in JS
- 6 Ways To convert number to String in JavaScript
- Convert timestamp to datetime in JavaScript
- How to Convert Number to letter JavaScript
- Create Multiline string in JavaScript ES6
- How to Sort Array of Objects in JavaScript
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.