JavaScript Array Iteration - Ways of iterating over a array in JavaScript
JavaScript Array forEach()
- The forEach() method calls a function (a callback function) once for each array element.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>Calls a function once for each array element.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";
}
</script>
</body>
</html>
Output
JavaScript Array.forEach()
Calls a function once for each array element.
45
4
9
16
25Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
The example above uses only the value parameter. The example can be rewritten to.
JavaScript Array map()
- The map() method creates a new array by performing a function on each array element.
- The map() method does not execute the function for array elements without values.
- The map() method does not change the original array.
JavaScript Array filter()
- The filter() method creates a new array with array elements that pass a test.
- This example creates a new array from elements with a value larger than 18.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.filter()</h2>
<p>Creates a new array with all array elements that passes a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Output
JavaScript Array.filter()
Creates a new array with all array elements that passes a test.
45,25
JavaScript Array reduce()
- The reduce() method runs a function on each array element to produce (reduce it to) a single value.
- The reduce() method works from left-to-right in the array.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduce()</h2>
<p>This example finds the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Output
JavaScript Array.reduce()
This example finds the sum of all numbers in an array:
The sum is 99
JavaScript Array reduceRight()
- The reduceRight() method runs a function on each array element to produce (reduce it to) a single value.
- The reduceRight() works from right-to-left in the array.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduceRight()</h2>
<p>This example finds the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Output
JavaScript Array.reduceRight()
This example finds the sum of all numbers in an array:
The sum is 99
JavaScript Array every()
- The every() method checks if all array values pass a test.
- This example checks if all array values are larger than 18.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.every()</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Output
JavaScript Array.every()
The every() method checks if all array values pass a test.
All over 18 is false
JavaScript Array some()
- The some() method checks if some array values pass a test.
- This example checks if some array values are larger than 18.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.some()</h2>
<p>The some() method checks if some array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Output
JavaScript Array.some()
The some() method checks if some array values pass a test.
Some over 18 is trueJavaScript Array indexOf()
- The indexOf() method searches an array for an element value and returns its position.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.indexOf()</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
Output
JavaScript Array.indexOf()
Apple is found in position 1