Higher-order functions and currying in JavaScript-JS Tutorial-php.cn

Higher-order functions and currying in JavaScript

WBOY

Release： 2023-09-04 17:57:07

forward

762 people have browsed it

JavaScript 中的高阶函数和柯里化

Functions are very useful features in any programming language. Developers may be able to find any programming language that does not contain this function. Furthermore, when we start learning any programming language, we definitely learn about functions, i.e., blocks of code that provide reusability of the code.

In this tutorial, we will learn about higher-order functions and currying.

Higher-order functions

Before we start currying in JavaScript, let’s first understand higher-order functions.

The simple definition of a higher-order function is: a function that takes another function as a parameter or returns a function. Have you ever used the sort() method in JavaScript or any other programming language like C or Python? If so, you may have passed a callback function as argument to the sort() method to sort the array based on a specific context.

Therefore, we can say that the sort() method is a higher-order function.

grammar

Users can use higher-order functions according to the following syntax.

function sortArray(ele1, ele2) {
   
   // function body
}
array.sort(sortArray);

Copy after login

In the above syntax, sort() is a higher-order function because we have passed the sortArray() function as a parameter.

Example

In the example below, we create an array of numbers containing different values. After that, we use the filter() method to filter out all elements in the array that are divisible by 2.

Users can observe that we have passed the filter_func() function as a parameter to the filter() method. Therefore, 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>

Copy after login

Example

In this example, we create an array of strings. After that, we capitalize the first letter of all array values using the map() method. We pass the callback arrow function as an argument to the map method, which returns a string after the first character is capitalized.

We use the substr() and toUpperCase() methods to uppercase the first character of each 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>

Copy after login

Now, users can know the benefits of using higher-order functions. For example, the filter() method has been implemented in JavaScript’s Array library, allowing users to override filter logic by passing a custom callback function as a parameter.

Currying in JavaScript

Currying is similar to higher-order functions, it returns functions. Curried functions accept multiple parameters, and users can pass the parameter values to nested functions.

The last nested function of the curried function returns the final output.

grammar

Users can write curried functions according to the following syntax.

function addition(num1) {
   return function (num2) {
      return num1 + num2;
   };
}
addition(10)(20);

Copy after login

We return this function from the addition() function in the above syntax. Additionally, users can also observe how we call the addition() function by passing multiple arguments.

Example

In the example below, we create a curried function named addition(). The addition function has only one parameter. It also returns a nested function that also takes a single argument. The nested function returns the sum of the num1 and num2 arguments.

<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>

Copy after login

Users learned about higher-order functions and curried functions in this tutorial. Higher-order and currying functions have many uses, some of which we've seen with three examples.

The above is the detailed content of Higher-order functions and currying in JavaScript. For more information, please follow other related articles on the PHP Chinese website!