Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them.
Curried functions are functions that take in multiple arguments and are converted to multiple functions that each take in a single argument. They are examples of higher-order functions.
In our case, they are functions that return functions. Let’s take a look at an example below.
//A higher-order function that checks if an account detail is right or wrong.
checkBankDetails("Theodore Kelechukwu Onyejiaku")(validBankName)(3010006919)(validAcctNumber);
The code above is a higher-order function that checks if a bank account’s details are correct.
Let’s continue. What codes could have led to this? Here is the code below:
From the code above, we just created a higher-order function that takes functions which each take the user’s name and the expected or valid name of a user account. The function also takes the account number of the individual and the expected or valid account number. So, all these functions have been passed to our higher-order function, checkBankDetails()
.
Next, inside the higher-order function, we create two variables that check if the arguments entered are correct. This will be achieved through the use of Regex (Regular Expressions).
Finally, we write out conditional statements: here, we check if the result variables are true
or false
and then log their corresponding errors.
After all the codes are inside the higher-order function, we then create our regex values that will be passed as the valid expression for a user account name and account number.
Finally, when we run the code below, what do we get?
checkBankDetails("Theodore Kelechukwu Onyejiaku")(validBankName)(3010006919)(validAcctNumber);
Below is the entire code for this article, feel free to try it out and play with it!
const checkBankDetails = (userName) => (expectedName) => (acctNo) => (expectedAcctNo) => {let nameResult = expectedName.test(userName);let acctResult = expectedAcctNo.test(acctNo);if(nameResult == false && acctResult == false){console.log("Bank Name and Account Number are incorrect! \nName must be two or three names \nand number must be 10");}else if(nameResult == false && acctResult == true){console.log("Bank Name is incorrect! \nName must be two or three names");}else if(nameResult == true && acctResult == false){console.log("Account NUMBER is incorrect! \nMust be 10 numbers");}else{console.log(`Account Details are correct\n Please transfer some cash to the account\n ${userName}, ${acctNo}, Eco Bank! Thanks`);}}//Must be your full name. Two or three names maximumlet validBankName = /^[a-z]+\s[a-z]+(\s[a-z]+)?$/i;//Must be an account number. 10 numbers onlylet validAcctNumber = /^[0-9]{10}$/;checkBankDetails("Theodore Kelechukwu Onyejiaku")(validBankName)(3010006919)(validAcctNumber);
After reading this shot, you may think, “Why not just write a simple function that just takes parameters and does whatever it should do with them?”
You are correct, but what we wanted to see here was how higher-order functions could be used, and not be confused when we see them.
Where you might need this is in form validation in ReactJs. Hopefully, seeing a function like “add(1)(2)(3)(4)(5)” won’t look confusing next time!