.css-df1pn7{display:block;width:16rem;}     JavaScript Higher-Order Functions

Bello
·Jan 30, 2021·

Subscribe to my newsletter and never miss my upcoming articles

A function in another function can either be a returned value or an argument.

See the example below:

const calcSum = (a, b) => {
return a + b;
};

const sum = calcSum(23, 12);
console.log(sum); // 35

const higherFunc = cost => {
return `It costs \${cost} dollars.`;
};

console.log( higherFunc(sum) ); // function as an argument
// It costs 35 dollars.

Functions as Data

A function can get assigned to a variable.

See the example below:

const calcSum = (a, b) => {
return a + b;
};

const sum = calcSum;
console.log( sum(12, 23) ) // 35

In the example above, the address in memory of both calcSum and sum is the same. We only changed the function name from calcSum to sum as a variable.

Functions as parameters

Higher-order functions can accept functions as parameters. Such parameters are called callback functions.

See the example below:

const add = (num1, num2) => {
return num1 + num2;
};

const mult = (num1, num2) => {
return num1 * num2;
};

const calculator = (num1, num2, operator) => {
return operator(num1, num2);
};

console.log( calculator(5, 7, add) ); // 12
console.log( calculator(5, 7, mult) ); // 35

In the example above, the parameter operator is defined as add and mult function but also returned as a value, return operator(num1, num2). The function (operator) is called a callback function.

The function operator was called back twice to add and mult.

console.log( calculator(5, 7, add) ); // 12
console.log( calculator(5, 7, mult) ); // 35

Functions as arguments

Functions can be arguments to other functions.

See the example below:

const calcSum = (a, b) => {
return a + b;
};

const sum = calcSum(23, 12);
console.log(sum); // 35

const higherFunc = cost => {
return `It costs \${cost} dollars.`;
};

console.log( higherFunc(sum) ); // function as an argument
// It costs 35 dollars.

In the example above, sum is a variable that refers to a calling function calcSum(23, 12).

Since sum is a returned value, it can be treated as an argument in a higher-order function higherFunc(sum).

Happy coding! TechStack | Bluehost

• Get a website with a free domain name for 1st year and a free SSL certificate.
• 1-click WordPress install and 24/7 support.
• Starting at \$3.95/month.
• 30-Day Money-Back Guarantee. Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.