Today we will learn about Higher-Order Functions. We’ll learn how to use “abstraction” in programming by writing functions. In addition to allowing us to reuse our code, functions help to make clear, readable programs.
Higher-order functions are functions that accept other functions as arguments and/or return functions as output.
Functions as Data
JavaScript functions behave like any other data type in the language; we can assign functions to variables, and we can reassign them to new variables.
let sayHello = () => {
console.log("Hello World!");
}
//assigning this function to new variable
let newVariable = sayHello;
newVariable(); //O/p Hello World!
newVariable is a variable that holds a reference to our original function. If we could look up the address in memory of newVariable and the address in memory of sayHello they would point to the same place. Our new newVariable() function can be invoked with parentheses as if that was the name we originally gave our function.
Notice how we assign sayHello without parentheses as the value to the newVariable variable. We want to assign the value of the function itself, not the value it returns when invoked.
If you want the original function name you can use the name property.
console.log(newVariable.name);
//output : - sayHello
In JavaScript, functions are first-class objects. This means that, like other objects you’ve encountered, JavaScript functions can have properties and methods.
Since functions are a type of object, they have properties such as .length and .name, and methods such as .toString().
Functions as Parameters
A parameter is a placeholder for the data that gets passed into a function. Since functions can behave like any other type of data in JavaScript, it might not surprise you to learn that functions can accept other functions as parameters.
A higher-order function is a function that either accepts functions as parameters, returns a function, or both! We call functions that get passed in as parameters callback functions. Callback functions get invoked during the execution of the higher-order function.
When we invoke a higher-order function, and pass another function in as an argument, we don’t invoke the argument function. Invoking it would evaluate passing in the return value of that function call. With callback functions, we pass in the function itself by typing the function name without the parentheses:
const higherOrderFunc = param => {
param();
return `I just invoked ${param.name} as a callback function!`
}
const anotherFunc = () => {
return 'I\'m being invoked by the higher-order function!';
}
console.log(higherOrderFunc(anotherFunc));
//I just invoked anotherFunc as a callback function!
We wrote a higher-order function higherOrderFunc that accepts a single parameter, param. Inside the body, param gets invoked using parentheses. And finally, a string is returned, telling us the name of the callback function that was passed in.
Below the higher-order function, we have another function aptly named anotherFunc. This function aspires to be called inside the higher-order function.
Lastly, we invoke higherOrderFunc(), passing in anotherFunc as its argument, thus fulfilling its dreams of being called by the higher-order function.
Summary
👉🏻 Abstraction allows us to write complicated code in a way that’s easy to reuse, debug, and understand for human readers.
👉🏻 We can work with functions the same way we work with any other type of data, including reassigning them to new variables.
👉🏻 JavaScript functions are first-class objects, so they have properties and methods like any other object.
👉🏻 Functions can be passed into other functions as parameters.
👉🏻 A higher-order function is a function that either accepts functions as parameters, returns a function, or both.
Thank You 🙏🏻
Follow the Codecademy JavaScript Course if you wanna learn more about JS.