Skip to main content

Command Palette

Search for a command to run...

JavaScript Higher-Order Functions

Updated
•2 min read•View as Markdown
JavaScript Higher-Order Functions
B

Web technology related ➡️ blogger || video creator || author || online instructor || YouTuber || web developer || freelancer


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!


Buy me a Coffee


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.

JavaScript

Part 19 of 50

You will learn the basics of JavaScript, including the Modern JS or *ECMAScript 2015+* The approach is from the basics to more advanced topics with lots of examples. It also include YouTube videos...

Up next

Debugging in the Browser

https://youtu.be/yEvPB41UI7Y Debugging is the process of finding or fixing errors (bugs) within a script. Browsers contain debugging tools for developers to debug or trace code step by step. Before following the steps below, hit Ctrl + Shift + N to ...