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

Home

Web Front-end

JS Tutorial

Higher-order functions and currying in JavaScript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 pm 05:57 PM

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

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 id="Higher-order-functions-using-the-filter-method">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 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 id="Higher-order-functions-using-the-map-method">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 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);

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 id="Curried-functions">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 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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Javascript Data Types : Is there any difference between Browser and NodeJs?May 14, 2025 am 12:15 AM

JavaScript core data types are consistent in browsers and Node.js, but are handled differently from the extra types. 1) The global object is window in the browser and global in Node.js. 2) Node.js' unique Buffer object, used to process binary data. 3) There are also differences in performance and time processing, and the code needs to be adjusted according to the environment.

JavaScript Comments: A Guide to Using // and /* */May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

See all articles