JavaScript Array forEach()
The forEach() function runs a specified function (a callback function) for every element in an array.
Please note that this function requires three pieces of information:
- The item value
- The item index
- The array itself
The example above only uses the value parameter. You can rewrite the example like this:
JavaScript Array map()
The map() function makes a fresh array by applying a function to each element of the array.
The map() function doesn't run for array items with no values.
The map() function doesn't modify the original array.
In this illustration, each value in the array is doubled.
Please note that the function requires three arguments:
- The item value
- The item index
- The array itself
When a callback function uses just the value parameter, you don't need to include the index and array parameters.
JavaScript Array flatMap()
In 2019, JavaScript introduced a new feature called the Array flatMap() method. You can learn more about it in the ES2019 documentation.
The flatMap() function works like this: it takes all the elements in an array, processes them in a certain way, and then makes a new array by simplifying the original one.
JavaScript Array filter()
The filter() method forms a fresh array containing elements from the original array that meet a specific condition or test.
This demonstration forms a fresh array consisting of items having values greater than 18.
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
In the example shown, the callback function doesn't need to use the index and array parameters, so you can leave them out.
JavaScript Array reduce()
The reduce() function goes through each item in an array and uses a special function to combine them into a single result.
The reduce() method starts processing the array from the left side. You can also check out reduceRight() for the opposite direction.
The reduce() function does not change the original array.
This example finds the sum of all numbers in an array:
Please note that this function requires four specific inputs:
- The total (the initial value / previously returned value)
- The item value
- The item index
- The array itself
The example above does not use the index and array parameters. It can be
rewritten to:
The reduce() method has the option to start with an initial value.
JavaScript Array reduceRight()
The reduceRight() method in HTML, with the same class "ppt-codespan," performs a function on each item in an array to combine them into one single result.
The reduceRight() function processes the array elements from the right side to the left. You can also check out reduce() for a similar operation.
The reduceRight() method does not reduce the original array.
This example finds the sum of all numbers in an array:
Remember, this function requires four specific inputs.
- The total (the initial value / previously returned value)
- The item value
- The item index
- The array itself
The provided example doesn't make use of the index and array parameters. It can be modified to:
JavaScript Array every()
The every() method examines whether all the values in an array pass a specific test.
This example checks if all array values are larger than 18:
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
When you're using a callback function and you only need the first parameter (value), you can leave out the other parameters.
JavaScript Array some()
The some() method examines whether certain values in an array meet a specific condition.
This example checks if some array values are larger than 18:
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
JavaScript Array.from()
The Array.from() function takes any object with a length property or something you can go through one by one and turns it into an Array.
JavaScript Array Keys()
The Array.keys() function provides you with a list of keys from an array.
JavaScript Array entries()
The entries() method provides an Array Iterator that contains key-value pairs.
[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]
The entries() method won't alter the initial array.
JavaScript Array with() Method
ES2023 introduced the Array with() method. It's a safe way to change elements in an array without changing the original array.
JavaScript Array Spread (...)
The ... operator makes an iterable (similar to an array) have more elements.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Execute a function for every item in an array.</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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Generate a new array by applying a function to each element in the existing array:</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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Generate a new array by applying a function to each element in the existing array:</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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>
<p id="demo"></p>
<script>
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new list containing only the elements that meet a specific condition from the original list.</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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new list containing only the elements that meet a specific condition from the original list.</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) {
return value > 18;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find 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) {
return total + value;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find 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, 100);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find 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) {
return total + value;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method looks at each item in an array and tests whether they all meet a certain condition.</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) {
return value > 18;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The some() Method</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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>
<p>Generate an array from any object that has a length property or from any object that can be iterated over.</p>
<p id="demo"></p>
<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>
<p>The Array.from() method is not supported in Internet Explorer.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>
<p>Generate an object that iterates through an array and returns its keys.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + " <br> ";
}
document.getElementById("demo").innerHTML = text;
</script>
<p>Array.keys() is not supported in Internet Explorer.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>
<p>The function "entries()" gives back an object that can go through each pair of keys and values in an array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x + " <br> ";
}
</script>
<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The with() Method</h2>
<p id="demo"></p>
<script>
const months = ["Januar", "Februar", "Mar", "April"];
const myMonths = months.with(2, "March");
document.getElementById("demo").innerHTML = myMonths;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The spread operator helps to spread out elements from iterable objects.</p>
<p id="demo"></p>
<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery