These are a few of the most important utility functions, important to note this :
They take a function as an argument.
They do not mutate or change the original arguments passed inside the function, they return a new copy,which is always a good practice.
Understanding map() function
The map() function is applied to a simple array or array of objects, which iterates through the whole array and returns a new array based on the conditions specified inside the map function. (Callback function)
Example: Double all the Odd Numbers present in an Array without changing the Orginal Array.
const numbers=[3,5,6,2,7,4,9];
const getOdd=(num)=>num%2!=0 ? num*=2 : num;
const doubleOdd=(num)=>num.map(getOdd);
/*Here getOdd is the callback function,we can also directly use it inside map function like this
const doubleOdd=(num)=>num.map((num)=>num%2!=0 ? num*=2 : num);*/
const newArray=doubleOdd(numbers);
console.log(newArray);
//Output : [ 6,10,6,2,14,4,18];
In this example :
The getOdd function will find the odd values and double them.
Whereas the doubleOdd function will map the number array by passing the getOdd Callback function, which will return the new array with a required answer.
Understanding filter() function
The filter() function when applied to an array or an array of objects, will return all the elements which are true based on the specified condition.
The find() function is similar to the filter() function, the difference being that it will return only the first element based on the specified condition.
Example: List the names of the students in a classroom whose age is above 15.
const classroom=[
{name:"Akshay",age:19},
{name:"Rohit",age:14},
{name:"Mohit",age:16},
{name:"Aditya",age:12 }
];
//To check if age is above 15
const ageAbove15=({age})=>{
if(age>15){
return true;
}
return false;
}
//const getStudents=(students)=>students.filter(ageAbove15);
//[ { name: 'Akshay', age: 19 }, { name: 'Mohit', age: 16 } ]
const getNames=(students)=>students.filter(ageAbove15).map(({name})=>name);
//[ 'Akshay', 'Mohit' ]
console.log(getNames(classroom));
In this example :
We have used both map() and filter() functions for a better understanding.
If we just use the filter() function, as used in getStudent function it would return all the objects with age above 15.
But we just want the name of the students with ages above 15, so I have appended the map function after the filter and used object destructuring to just get the name of the student.
Understanding reduce() function
It is one of the trickiest functions, I found to understand. It takes in three arguments, the accumulator, current value, and initial value. By default, the initial value is 0. The current value iterates through the array and the accumulator stores it after each iteration. We pass the accumulator and the current value through a callback function.
Example: Return the maximum number from the array using reduce() function
const numbers = [10, 5, 8, 3, 12 ,6];
const getMaxNumber=(acc,curr)=>{
if(curr>acc){
acc=curr;
}
return acc;
}
const getMaximumNumber=(arr)=>arr.reduce(getMaxNumber,-Infinity);
console.log(getMaximumNumber(numbers));
In this example :
We are finding the maximum number from the array using the reduce() function. Here the callback function is getMaxNumber which takes the accumulator(acc) and current values(curr) as the arguments.
We check whether the current value is greater than the accumulator, if it is, then we assign the current value to the accumulator and return the accumulator.
We have initialized the current value to -∞ inside the reduce() function so that whenever we get the maximum value through the array, it will get stored inside the accumulator.