Filter, map, and reduce is three of Higher-Order Function that often uses. The three functions of these is a prototype of the array data type. Although, these functions could contain miscellaneous such as an array of integer, string, or may array of objects.
Table of contents:
- Filter
- Map
- Reduce
- Chaining Method
Filter
By using a filter() method, the method will return a new array with elements that pass the filtering rule (provide as a function).
For example, I have an array that contains some random numbers. I want to find the numbers that greater or equal to 3 by using the higher-order function filter().
To do that, we can immediately call the array that will be filtered.
const numbers = [-4, 9, 4, -1, -5, 8, 2, 3, -9];
const newNumbers = numbers.filter(n => n >= 3);
console.log(newNumbers);
Map
We will map all the elements within an array by using a new function. For example, I want to have a new array whose contents are the result of every number multiplied by two.
Example:
const numbers = [-4, 9, 4, -1, -5, 8, 2, 3, -9];
const newNumbers = numbers.map(n => n * 2);
console.log(numbers);
console.log(newNumbers);
Reduce
The last of the higher-order function example is the reduce() function. That used to do something to the elements contained in the array.
In this case, I want to sum the elements contained in the numbers array.
Reduce are different from the others, they should have two parameters.
Example:
const numbers = [-4, 9, 4, -1, -5, 8, 2, 3, -9];
const newNumber = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(newNumber);
0 + -4 + 9 + 4 + -1 + -5 + 8 + 2 + 3 + -9
You can set the first value of this function by using the following syntax:
const newNumber = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 6);
The illustration will be like this:
6 + -4 + 9 + 4 + -1 + -5 + 8 + 2 + 3 + -9
The accumulator is the result of the process.
The currentValue is the element of the array that being looped.
However, you can set the name of the parameters as do you want, that's just an example.
Chaining Method
With chaining, we can combine all of the Higher-Order Functions in one execution.
const numbers = [-4, 9, 4, -1, -5, 8, 2, 3, -9];
const total = numbers.filter(n => n > 3) // will return 9, 4, 8
.map(n => n * 2) // will return 18, 8, 16
.reduce((accum, current) => accum + current); // will return 42
console.log(total);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Higher Order Function</title>
</head>
<body>
<!-- Filter -->
<!-- <script>
const numbers = [-4, 9, 4, -1, -5, 8, 2, 3, -9];
// const newNumbers = numbers.filter(function (n) {
// return n >= 3;
// });
// filter with arrow function
const newNumbers = numbers.filter(n => n >= 3);
console.log(newNumbers);
</script> -->
<!-- Map -->
<!-- <script>
const numbers = [-4, 9, 4, -1, -5, 8, 2, 3, -9];
const newNumbers = numbers.map(n => n * 2);
console.log(numbers);
console.log(newNumbers);
</script> -->
<!-- Reduce -->
<!-- <script>
const numbers = [-4, 9, 4, -1, -5, 8, 2, 3, -9];
const newNumber = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(newNumber);
</script> -->
<!-- Chaining -->
<script>
const numbers = [-4, 9, 4, -1, -5, 8, 2, 3, -9];
const total = numbers.filter(n => n > 3) // will return 9, 4, 8
.map(n => n * 2) // will return 18, 8, 16
.reduce((accum, current) => accum + current); // will return 42
console.log(total);
</script>
</body>
</html>