Ways of iterating over a array in JavaScript.
Arrays in Javascripts, are single variables used to store different kind of elements.
For example, a simple array accesses may something like this:
javascript
<script> array = [ 'geeks' , '4' , 'geeks' ]; // Accessing array elements one by one console.log(array[0]); console.log(array[1]); console.log(array[2]); </script> |
Output:
geeks 4 geeks
There are multiple ways one can iterate over an array in Javascript. The most useful ones are mentioned below.
Using for loop.
This is similar to for loops in other languages like C/C++, Java, etc
javascript
<script> array = [ 1, 2, 3, 4, 5, 6 ]; for (index = 0; index < array.length; index++) { console.log(array[index]); } </script> |
Output:
1 2 3 4 5 6
Using while loop.
This is again similar to other languages.
javascript
<script> index = 0; array = [ 1, 2, 3, 4, 5, 6 ]; while (index < array.length) { console.log(array[index]); index++; }</script> |
Output:
1 2 3 4 5 6
using forEach method.
The forEach method calls the provided function once for every array element in the order.
javascript
<script> index = 0; array = [ 1, 2, 3, 4, 5, 6 ]; array.forEach(myFunction); function myFunction(item, index) { console.log(item); }</script> |
Output:
1 2 3 4 5 6
Using every method.
The every() method checks if all elements in an array pass a test (provided as a function).
javascript
<script> index = 0; array = [ 1, 2, 3, 4, 5, 6 ]; const under_five = x => x < 5; if (array.every(under_five)) { console.log( 'All are less than 5' ); } else { console.log( 'At least one element is not less than 5' ); } </script> |
Output:
At least one element is not less than 5.
Using map.
A map applies a function over every element and then returns the new array.
javascript
<script> index = 0; array = [ 1, 2, 3, 4, 5, 6 ]; square = x => Math.pow(x, 2); squares = array.map(square); console.log(array); console.log(squares);</script> |
Output:
1 2 3 4 5 6 1 4 9 16 25 36
Using Filter
It is used to filter values from an array and return the new filtered array
Javascript
<script> array = [ 1, 2, 3, 4, 5, 6 ]; even = x => x%2 === 0; evens = array.filter(even); console.log(array); console.log(evens); </script> |
Output:
[ 1, 2, 3, 4, 5, 6 ] [ 2, 4, 6 ]
Using Reduce
It is used to reduce the array into one single value using some functional logic
Javascript
<script> array = [ 1, 2, 3, 4, 5, 6 ]; const helperSum = (acc,curr) => acc+curr sum = array.reduce(helperSum, 0); console.log(array) console.log(sum); </script> |
Output:
[ 1, 2, 3, 4, 5, 6 ] 21
Using Some
It is used to check whether some array values passes a test
Javascript
<script> array = [ 1, 2, 3, 4, 5, 6 ]; const lessthanFourCheck = (element) => element < 4 ; const lessthanFour = array.some(lessthanFourCheck) console.log(array); if (lessthanFour){ console.log( "At least one element is less than 4" ) } else { console.log( "All elements are greater than 4 " ) } </script> |
Output :
[ 1, 2, 3, 4, 5, 6 ] At least one element is less than 4