JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Array Method
Array iteration methods are used to operate on every array item.
JavaScript Array forEach()
The forEach() method is used to calls a function (a callback function) once for each array element.
Example
<!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.
The function takes 3 arguments:
- The item value
- The item index
- The array itself
The example uses only the value parameter. The example can be rewritten to:
Example
<!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) {
txt += value + “<br>”;
}
</script>
</body>
</html>
Output
JavaScript Array.forEach()
Calls a function once for each array element.
45
4
9
16
25
JavaScript Array map()
The map() method is used to make a new array by performing a function on each array element.
The map() method is used not to execute the function for array elements without values.
The map() method does not change the original array.
This example multiplies each array value by 2:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p>Creates a new array by performing a function on each array element.</p>
<p id=”demo”></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById(“demo”).innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
Output
JavaScript Array.map()
Creates a new array by performing a function on each array element.
90,8,18,32,50
The function takes 3 arguments:
- The item value
- The item index
- The array itself
When a callback function makes use of the value parameter, the index and array parameters can be removed
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p>Creates a new array by performing a function on each array element.</p>
<p id=”demo”></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById(“demo”).innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>
Output
JavaScript Array.map()
Creates a new array by performing a function on each array element.
90,8,18,32,50
JavaScript Array filter()
The filter() method specifies a new array with array elements that passes a test.
This example defines a new array from elements with a value larger than 18:
Example
<!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 is used to run a function on each array element to generate (reduce it to) a single value.
The reduce() method is used to work from left-to-right in the array. See also reduceRight().
Example
<!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 is used to run a function on each array element to produce (reduce it to) a single value.
The reduceRight() works from right-to-left in the array.
The reduceRight() method does not reduce the original array.
This example finds the sum of all numbers in an array:
Example
<!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 is used to check if all array values pass a test
This example below checks if all array values are larger than 18:
Example
<!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 is used to check if some array values pass a test.
This example above checks if some array values are larger than 18:
Example
<!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 true
JavaScript Array indexOf()
The indexOf() method is used to find an array for an element value and returns its position.
Search an array for the item “Apple”:
Example
<!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
JavaScript Array lastIndexOf()
Array.lastIndexOf() is similar to Array.indexOf(), but returns the position of the last occurrence of the specified element.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.lastIndexOf()</h2>
<p id=”demo”></p>
<script>
const fruits = [“Apple”, “Orange”, “Apple”, “Mango”];
let position = fruits.lastIndexOf(“Apple”) + 1;
document.getElementById(“demo”).innerHTML = “Apple is found in position ” + position;
</script>
</body>
</html>
Output
JavaScript Array.lastIndexOf()
Apple is found in position 3
JavaScript Array find()
The find() method returns the value of the first array element that passes a test function.
This example finds (returns the value of) the first element that is larger than 18:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.find()</h2>
<p id=”demo”></p>
<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
document.getElementById(“demo”).innerHTML = “First number over 18 is ” + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Output
JavaScript Array.find()
First number over 18 is 25
JavaScript Array findIndex()
The findIndex() method is used to return the index of the first array element that passes a test function.
This example below searches the index of the first element that is larger than 18:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.findIndex()</h2>
<p id=”demo”></p>
<script>
const numbers = [4, 9, 16, 25, 29];
document.getElementById(“demo”).innerHTML = “First number over 18 has index ” + numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Output
JavaScript Array.findIndex()
First number over 18 has index 3