Forem

Cover image for JavaScript Higher-Order Functions
Bello Osagie
Bello Osagie

Posted on • Edited on

3 1

JavaScript Higher-Order Functions


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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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!


Buy me a Coffee


TechStack Media | 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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay