What are these?
- These are the
higher order functions
of javascript. - A higher-order function can be defined as a function inside another function.
- These functions are used to transform an
Array
and return a newArray
as the result.
We will be using this array for all the examples
const arr = [10, 40, 20, 50, 80, 30];
map( )
Goes through each and every value of the array and do specified task.
It takes a callback function and returns the result
let us add +10 to every element in the array
function addTEN(element) {
return element + 10;
}
console.log(arr.map(addTEN)); // [20,50,30,60,90,40]
This may be the first time you have seen someone using map
like this.
Well, this approach is called writing a map using anonymous arrow functions
.
const res = arr.map((val) => val + 10);
console.log(res); // [20,50,30,60,90,40]
filter( )
As the name suggests it filters
.
Filters what?
It filters the elements of the array that satisfy
the given predicate or condition (function) and returns the same.
It also takes a callback
function
Let us filter all the elements greater than or equal to 50
const result = arr.filter((val) => val >= 50);
console.log(result); // [50,80]
OR we may write it like this
const result = arr.filter(function isGreaterThanHalf(val) {
return val >= 50;
});
console.log(result); // [50,80]
reduce( )
It actually does not reduce anything!
The name itself is very confusing.
Then what is reduce?
Used in such places when we have to take the whole array
and get the result as a single element
from that array.
Like
- Finding the sum of each element in the array
- Finding the largest or smallest element It all results in a single value.
Before we jump into the code we are going to implement one of the above examples without using
reduce
or the non-functional way.
function findSum(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) sum += arr[i];
return sum;
}
/* Two things to learn from the above code
1. Single Statement does not require any curly braces {}
2. That += is same as sum = sum + arr[i];``
GREAT RIGHT?
*/
console.log(findSum(arr)); // 230
Now, How we can transform the above logic and write a
reduce
function instead? (the easier way).
The reduce()
function takes two parameters.
-
callback(collector,currentValue)
1.1collector
- this is the variable where the final value will be stored. 1.2currentValue
- the current value which is being iterated. - initial value for collector
const output = arr.reduce(function (collector, current) {
collector = collector + current;
return collector;
}, 0); // this zero(0) is the initial value for our sum to be stored in.
And when you google some solution you may see this type of example on stackoverflow
which most of you didn't understand and just copy pasted the code.
const output = arr.reduce((col, cur) => (col += cur), 0);
Lets find the maximum in an array using reduce( )
const output = arr.reduce(function (maximum, current) {
if (current > maximum) maximum = current;
return maximum;
}, 0);
console.log(output); // 80
NOTE: We have taken the second parameter or the initial value of
maximum
as 0 because we have assumed that thearray
does not have anynegative
integers, otherwise we would have taken thefirst
element as themaximum
.
The most complex but aesthetic
way to write the same example will be
const output = arr.reduce((max, cur) => (cur > max ? (max = cur) : max), 0);
console.log(output); // 80
Real Life Examples using Map, Filter and Reduce
For more complex
examples we are taking this array
which sort of looks like a data coming right from an API.
const apiData = [
{ name: "Gautam Anand", age: 51, education: "Graduate", isActive: true },
{
name: "Ram Kumar Sharma",
age: 23,
education: "Never Went to School",
isActive: false,
},
{
name: "Harshal Jain",
age: 51,
education: "Graduate",
isActive: true,
},
{
name: "Siddhart Singh",
age: 40,
education: "Post Graduate",
isActive: false,
},
];
Find a list to get all the first names from apiData
map( ) tricky question
const list = apiData.map((user) => user.name.split(" ")[0]);
console.log(list); // [ 'Gautam', 'Ram', 'Harshal', 'Siddhart' ]
The split(" ")
method splits the list into various parts or arrays wherever it finds a space
hence the name became an array like this ['Gautam','Anand']
and to access its first element we added [0]
.
reduce( ) tricky question
Write reduce function such that we should get all of the ages and thier occurences.
// Output:
{ 23: 1, 51: 2, 40: 1 }
Its a very good question
const output = apiData.reduce((collector, current) => {
// checking if the key already exists
if (collector[current.age]) {
// incrementing the value
collector[current.age]++;
} else {
// creating the key first time
collector[current.age] = 1;
}
// returning the collector
return collector;
}, {}); // taking the initial value as {} to add key values into it.
console.log(output);
I think the comments are pretty self-explanatory. Still in case you are having trouble understanding here, try running the same in your IDE.
Chaining filter( ) and map( )
Let's have a look at this last example where we have to find all the names of the people who are active.
Lets create a filter( )
const result = apiData.filter((user) => user.isActive === true); // or just user.isActive
console.log(results);
This will provide us the Array
of Objects
which contains all the active users not the Names
// OUTPUT:
[
{
name: "Gautam Anand",
age: 51,
education: "Graduate",
isActive: true,
},
{
name: "Harshal Jain",
age: 51,
education: "Graduate",
isActive: true,
},
];
to get the names we will chain the filter()
with map()
.
const result = apiData.filter((user) => user.isActive).map((user) => user.name);
console.log(result); // [ 'Gautam Anand', 'Harshal Jain' ]
That's it for this reading, if you liked reading up till here please give it a β€οΈ.
Top comments (0)