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
Higher Order Functions and Currying in JavaScript
In any programming language, functions are a very useful feature. Developers might be able to find any programming language which doesn’t contain the function. Also, when we start learning any programming language, we definitely learn the function, a block of code that provides the code reusability.
In this tutorial, we will learn about higher-order functions and currying.
Higher Order Functions
Before we start currying in JavaScript, let’s first learn about the higher-order function.
The simple definition of the higher order function is A function that takes another function as an argument or returns a function. Have you ever used the sort() method in JavaScript or any other programming language like C++ or Python? If yes, you might have passed the callback function as an argument to the sort() method to sort the array based on the particular context.
So, we can say that sort() method is the higher order function.
Syntax
Users can follow the syntax below to use the higher-order functions.
function sortArray(ele1, ele2) { // function body } array.sort(sortArray);
In the above syntax, sort() is a higher-order function as we have passed the sortArray() function as an argument.
Example
In the example below, we have created an array of numbers that contains different number values. After that, we used the filter() method to filter all elements from the array divisible by 2.
Users can observe that we have passed the filter_func() function as an argument of the filter() method. So, we can say that the filter() method is a higher-order function.
<html>
<body>
<h2>Higher-order functions using the filter() method.</h2>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let array = [10, 30, 23, 32, 32, 32, 32, 45, 5, 6, 878989, 34, 23];
// creating the function to filter values
function filter_func(element) {
return element % 2 == 0;
}
// higher-order function
let divisibleBy2 = array.filter(filter_func);
output.innerHTML += "The filtered values are " + divisibleBy2;
</script>
</body>
</html>
Example
In this example, we have created the array of strings. After that, we used the map() method to capitalize the first letter of all array values. We have passed the callback arrow function as an argument of the map method, which returns a string after capitalizing the first character.
We used the substr() and toUpperCase() methods to capitalize the first character of every array string.
<html>
<body>
<h2>Higher-order functions using the map() method</h2>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let array = ["hi", "users", "welcome", "on", "tutorialspoint!"];
output.innerHTML += "Original Array: <br>" + array + "<br>";
// higher-order function
let results = array.map((string) => {
// creating the first character capitalize
return string.substr(0, 1).toUpperCase() + string.substr(1);
});
output.innerHTML += "<br>The array after capitalizing the first character: <br>" + results;
</script>
</body>
</html>
Now, users can know the benefits of using higher-order functions. For example, the filter() method is already implemented in the Array library of JavaScript, allowing users to override the filter logic by passing the custom callback function as an argument.
Currying in JavaScript
The currying is similar to the higher-order function, which returns the functions. The curried function takes multiple arguments, and users can pass that argument value to the nested function.
The last nested function of the curried function returns the final output.
Syntax
Users can follow the syntax below to write the curried function.
function addition(num1) { return function (num2) { return num1 + num2; }; } addition(10)(20);
We are returning the function from the addition() function in the above syntax. Also, users can observe how we have called the addition() function by passing the multiple arguments.
Example
In the example below, we have created the curried function named addition(). The addition function has only one parameter. It also returns the nested function, which also takes a single parameter. The nested function returns the sum of the num1 and num2 parameters.
<html>
<body>
<h2>Curried functions</h2>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
// curried function, which returns the function
function addition(num1) {
return function (num2) {
return num1 + num2;
};
}
output.innerHTML += "After calling the curried function, the result is " + addition(10)(20);
</script>
</body>
</html>
Users learned about the higher-order function and curried function in this tutorial. There are various uses of higher-order and curried functions, some of which we have seen via three examples.
161 Views
