- Map, Filter, Reduce are the higher-order function in javascript.
Map
- The map function is used to transform an array.
- Suppose you have this array
const arr = [5, 1, 3, 2, 6]
3. Its possible transformations could be doubling, tripling, or finding a Binary number of each element present in the array. and it will store the transformation into the new array.
4.
function double(x) {
return x * 2;
}
/*
* function map accepts function `double`.
* so the map is Higher Order function
*/
const output = arr.map(double);
console.log(output);
5. You can also write the above function like this
const output = arr.map((x) => x * 2);
console.log(output);
Map Example
const users = [
{ firstName: "Rahul", lastName: "More", age: 22 },
{ firstName: "Yogesh", lastName: "More", age: 20 },
{ firstName: "Rohit", lastName: "Bhosale", age: 17 },
{ firstName: "Nityanand", lastName: "Yevte", age: 28 },
{ firstName: "Sachin", lastName: "Yevte", age: 26 },
];
// get Full name of users
const fullName = users.map((x) => { // Now x has access to every elemet of array.
console.log(x.firstName + " " + x.lastName)
});
Filter()
- The filter function is used to filter values present inside the array.
- Let's say if you want to filter out al the values which are odd, or greater than 3 inside it, or divisible by 3.
- Used to filter the data based on condition.
function isOdd(x) {
return x % 2;
}
const FilterData = arr.filter(isOdd)
console.log(FilterData);
function even(x) {
return x % 2 == 0
}
const FilterData = arr.filter(even)
function even(x) {
return x % 2 == 0
}
const FilterData = arr.filter(even)
function greaterThan(x) {
return x > 4;
}
const FilterData = arr.filter(greaterThan)
Filter Example
// Get the name of the users Whose age is greater than 20
const ageOfx = users.filter((x) => {
if (x.age > 20) {
console.log(x.firstName);
}
})
Reduce()
- As the name suggests Reduce doesn't Reduce anything :D
- Reduce can be used to iterate over each & every element of an array & find the sum of all the elements in the array. or the largest or the max element inside the array.
- Instead of directly going to write Reduce Method we will just check the above (p2) example in a Non-Functional way.
function findSum(arr) {
let sum = 0;
for (var i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
return sum
}
console.log(findSum(arr));
4. So to find we do something like this in a non-functional way.
Let's Do it in a Functional Way.
const res = arr.reduce(function (acc, curr) { // Key, Value
});
5. So first function `reduce` accepts 2 parameters 1st is a function & we will talk later about 2nd function.
6. initially `acc` in 0 & `curr` contains the elements of the array.
7. if we console acc initially it will give 0 & later it will return `undefined.
8.
const res = arr.reduce(function (acc, curr) { // Key, Value
acc = acc + curr;
return acc;
});
console.log(res);
9. & if we talk about 2nd argument it takes the initial value of acc. ( by default it is 0 )
10. Another example using reduce. Find max element using Reduce.
const maxUsingReduce = arr.reduce(function (max, curr) {
if (curr > max) {
max = curr;
}
return max;
});
console.log(maxUsingReduce);
If my curr element is greater than the max element. then my max element is the current element.
Reduce Example
// get The age & show the count of number of people present in that array!
const countAge = users.reduce(function (acc, curr) {// intialValue, currentValue
if (acc[curr.age]) {
acc[curr.age] = ++acc[curr.age];
} else {
acc[curr.age] = 1
}
return acc;
}, {});
console.log(countAge)
We can also use Chaining on these functions.
// Get the name of the users Whose age is greater than 20
const ageOfx = users.filter((x) => x.age > 20).map(x => x.firstName);
console.log(ageOfx);
