Physical Address
Sagipora Sopore Baramulla 193201 Jammu & Kashmir
Hello and welcome to Codipher. In this article, we are going to look deeper into JavaScript higher-order functions.
So without wasting further time Let’s move to the main topic.
In a nutshell, higher-order functions are those functions that take other functions as arguments or return other functions.
A higher-order function receives a callback function as an argument.
Also Read: What is Call Stack In Javascript And Why Its Important
Now javascript have same built-in higher order functions, you may already be using them without even realising.
Let’s learn about some of the important built-in higher order functions.
The filter methods returns a new array of elements that passes a specific test provided by a callback function. And Since filter() receives a callback function therefore filter() is known as higher order function.
Now the callback function that is passed into filter() method takes three arguments:
let arr = [1, 2, 3, 4, 5]
const resultantArray = arr.filter((element) => {
return element > 3
})
console.log(resultantArray) //output- [4, 5]
In the above example, what’s happening is that the elements of arr
array is getting passed one by one into filter() callback method and they are getting tested for a specific test that is element > 3 and those elements which are passing the test are getting pushed in the resultantArray that’s why the output is [4,5]
since 4 and 5 were the only elements that passes the test.
The element argument is getting the value of elements of arr array one by one. It will first become 1 and then it will test 1>3 if it’s true then 1 will get pushed in the resultantArray and if it’s false it will be skipped to the next element.
Also Read: Latest JavaScript Features Every Web Developer Should Know
//filter age that is less than 18
const ageArray = [10, 12, 35, 55, 40, 32, 15]
const filterAgeArray = ageArray.filter((age) => {
return age < 18
})
console.log(filterAgeArray) //output- [10, 12, 15]
//filter positive numbers
const numArray = [-2, 1, 50, 20, -47, -20]
const positiveArray = numArray.filter((num) => {
return num > 0
})
console.log(positiveArray) //output- [1, 50, 45, 20]
//filter names which contains 'sh' in it
const namesArray = ['rahul', 'smith', 'harsh', 'hitesh', 'ram', 'hemant']
const filterNamesArray = namesArray.filter((name) => {
return name.includes('sh')
})
console.log(filterNamesArray) //output- ['harsh', 'hitesh']
As the name suggests the map() method is used to map the values of an existing array to new values. It pushes these new values to a new array and returns that new array.
A higher-order function is a function that expects a callback function as an argument. So, by this definition, it’s evident that Map() method is a higher-order function.
The callback function that is passed into map() takes three arguments.
const numArray = [1, 5, 3, 6, 4, 7]
const increasedArray = numArray.map((element) => {
return element + 1
})
console.log(increasedArray) //output- [2, 6, 4, 7, 5, 8]
Just like in filter(), the map() call-back function receives numArray elements one by one. Each numArray element will pass through the map() method and be incremented by 1 and increasedArray will now have the numArray elements incremented by 1.
Also Read: Best VSCode Extensions you should consider in 2022
Firstly, the map() function receives 1 as an argument. Then the map function maps it to a new value that is the element + 1. So, the elements now become 1 + 1. Finally, the returned number is pushed to the increasedArray. Like so, the increasedArray now contains 2, 5, 3, 6, 4, and 7.
//Exponentiate every number in an array
const numArray = [2, 3, 4, 5, 12, 15]
const poweredArray = numArray.map((number) => {
return number + number
})
console.log(poweredArray) //output- [4, 9, 16, 25, 144, 225]
//Extract the marks of students
const studentsArray = [
{
name: 'rakeeb',
marks: 90
},
{
name: 'nadeem',
marks: 95
},
{
name: 'Faisu',
marks: 6
}
]
const scoreArray = studentsArray.map((student) => {
return students.marks
})
console.log(scoreArray) //output- [90, 95, 6]
The reduce() method reduces the array to a single value, just like filter() and map(). The reduce() method also receives a callback function as an argument. Hence, it’s a higher-order function.
But reduce() takes one more argument other than the callback function and that is the initial value (will learn about it later in this article)
And again like filter() and map(), the callback function passed into reduce() takes some arguments but the callback function passed into reduce() takes 4 arguments instead of 3.
Also learn, How To Use JavaScript Date() Object, Fast and Easy
//a basic example of reduce()
const numArray = [1, 2, 3, 4, 5]
const sum = numArray.reduce((total, num) => {
return total + num
})
console.log(sum) //output- 15
Let’s first understand what total argument is. total argument is the previous value returned by reduce() function, now when the reduce() will run for the first time there will be no previous returned value therefore for the first time total argument is equal to the init value (remember the second argument that we pass into reduce())
Now we also haven’t used the initialValue in our example, so what happens is that when we don’t pass initialValue, the reduce() method skips the first element of the numArray and it starts from second element and the first element of numArray becomes the value of total argument.
Also Read: GitHub Repos That You Won’t Believe Exist
Comming to our example, initialValue isn’t passed so the first element of numArray such that 1 will become the value of total argument. The second element of numArray will pass as num argument, and the reduce will return total + num such that 1 + 2 = 3. 3 is the new value of total and now the third element from numArray will get passed into reduce() callback as num argument, again reduce will return total + num that is 3 + 3 = 6 and 6 will become the new value of total and so on.
I know the explanation is quite confusing but try to understand it step by step and believe me you will master reduce()
initialValue as the name suggests, is the initial value of the total argument as we know when reduce() runs for the first time there is no previous returned value. Hence the first element from the existing array (numArray in our case) becomes the value of the total argument. So instead of doing that we can give an initial value to the total argument.
Remember initialValue will be the initial value of the total argument, the total argument will become the previously returned value of reduce() later.
Note– initialValue argument when used will not skip its first element. Rather, reduce() callback will receive every element.
const resultantArray = existingArray.reduce((total, element, index, array) => {
//return something
}, initialValue)
And that’s it for this article guys. I hope you understood the concept of JavaScript higher-order functions with this article. If you have any doubt feel free to comment. Share this article if you found this article helpful.
For more information on javascript higher-order functions visit here
Want more content like this Click Here
I was more than happy to seek out this net-site.I needed to thanks to your time for this wonderful learn!! I definitely having fun with every little little bit of it and I’ve you bookmarked to check out new stuff you blog post.
I’m usually to running a blog and i actually admire your content. The article has actually peaks my interest. I’m going to bookmark your site and preserve checking for brand spanking new information.
[…] Also Read: JavaScript Higher Order Functions Simplified – map(), reduce() and filter() […]
[…] JavaScript Higher Order Functions Simplified – map(), reduce() and filter() March 10, 2022 […]