Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the use of Higher-order functions in JavaScript?
In this article we are going to discuss the use of Higher-order functions in JavaScript.
A higher order function is simply, a function that accepts other functions as parameters and/or returns a function. To know about Higher-order functions, we should learn about call back functions. A call back function is a function that is passed to another function as an argument. With the help of call back functions, one function can call another function and the call back function runs only after other function has finished. Some of the higher-order functions are map, reduce and filter.
In order to understand better, let’s look into the examples further in this article.
Example
The following is an example program to show the implementation of the call back functions.
<!DOCTYPE HTML>
<html>
<head>
<title>Why to Use Higher Order Functions</title>
</head>
<body style = "text-align:center;">
<h3>To show how call back functions work.</h3>
<p id="text1"></p>
<script type="text/javascript">
function display(val) {
document.getElementById("text1").innerHTML = "The multiplication of two values is "+val;
}
function Multiply(a,b,result) {
let mul = a*b;
return result(mul);
}
Multiply(25,25,display);
</script>
</body>
</html>
On executing the above code, the following output is generated.
Using Map Function
A Map function allows you to pass a function that is applicable to every element in an array.
Example
The following is an example for the map function implementation.
<!DOCTYPE HTML>
<html>
<head>
<title>Why to Use Map Function</title>
</head>
<body style = "text-align:center;">
<h3>To show how call Map function work.</h3>
<p id="text1"></p>
<script type="text/javascript">
function display(val) {
document.getElementById("text1").innerHTML = "The Squares of the numbers in the list are: "+val;
}
let arr1 = [11,22,33,44,55];
function Square(a) {
return a*a;
}
var result = arr1.map(Square);
display(result);
</script>
</body>
</html>
On executing the above code, the following output is generated.
Using Reduce function
The reduce function executes a reducer call back function. Generally, we use reduce function when you want to reduce the whole array into a single element by performing functions like addition, multiplication. Instead of using loop concepts for these specific functions, we can use reduce function. There are two types of Reduce methods – reduce() and reduceRight(). It contains two parameters – previousValue and currentValue
reduce() method, by default starts at the first element of the array and moves in the forward direction towards last element of the array.
reduceRight() method, by default starts at the last element of the array and moves in the backward direction towards first element of array.
Example
The following is an example program to implement the reduce method.
<!DOCTYPE HTML>
<html>
<head>
<title>Why to Use Higher Order Functions</title>
</head>
<body style = "text-align:center;">
<h3>To display how Reduce function work.</h3>
<p id="text1"></p>
<script type="text/javascript">
let arr1 = [[1,2],[2,3],[3,4],[4,5]];
function productOfArray(prev,curr) {
return prev.concat(curr);
}
var result1 = [[1,2],[2,3],[3,4],[4,5]].reduce(productOfArray);
var result2 = arr1.reduceRight(productOfArray);
document.getElementById("text1").innerHTML = "The Concatenation of list by reduce method: "+result1+" The Concatenation of list by reduceRight method: "+result2;
</script>
</body>
</html>
On executing the above code, the following output is generated.
Using Filter method
The filter method performs a call back function for each element in the array, the function is a Boolean function that must return either true or false. It returns the elements for which the callback function is true and filters out the elements for which the callback function is false.
Example
The following is an example program to implement the filter method.
<!DOCTYPE HTML>
<html>
<head>
<title>Why to Use Higher Order Functions</title>
</head>
<body style = "text-align:center;">
<h3>To display how Filter function work.</h3>
<p id="text1"></p>
<script type="text/javascript">
let arr1 = [1,3,7,9,6,13,17,20,18];
function isPrime(num) {
for (let i = 2; num > i; i++) {
if (num % i == 0) {
return false;
}
}
return num > 1;
}
var result1 = arr1.filter(isPrime);
document.getElementById("text1").innerHTML = "The Prime numbers from the list are: "+result1;
</script>
</body>
</html>
On executing the above code, the following output is generated.
844 Views
