Functional Programming in JS
By: Ashwani Pandey
Tags: JavaScript, Programming, Functional Programming, Tutorial, Javascript Tips

Higher-Order Functions

Higher-order function.

Higher-order functions is one of the fundamental concept used in functional programming. A function that accepts a function as an argument or returns a function is called a Higher-order function. For understanding Higher-ordered functions we first need to understand what are First-class functions.

Functions in Javascript are first class citizens i.e. they can be assigned to a variable , can be added to an Object and arrays, can be used as an argument to other functions, and can be returned by a function.

Being a first-class citizen provides abilities to write functions in Javascript in various ways.

Function Statements

Function Expressions

Function Statements :

Function statements are the more traditional way of defining a function with the keyword function following with the name of the function with round brackets and function body

function greet(){

console.log("Hello");

}

Function Expression:

A function expression is where we leverage functions being the first-class citizens. Function Expression is assigning function to a variable.

// Assigning anonymous function to a variable

const greet = function(){

console.log("Hello!");

} // Invoking the function

greet();

Having understood the concepts of first-class functions we can now understand Higher-order functions with ease.

Higher-order functions in a way provide a wrapper around our functions giving them functionalities while retaining the original properties of the function. In simpler words, we can take a function and wrap it with another function that as a whole will have the functionality of both the functions.

// Higher Order Function (passing function as an argument) const greet = function () { return "Hello, ";

}; function sayGreetings(functionalParameter, name) { console.log(functionalParameter(), name);

} sayGreetings(greet, "Ashwani"); // Function invocation.

In the above example, the function expression greet is passed as a parameter to the sayGreetings() function. Using this we can have the functionality of the greet function and add our logic to the sayGreetings() function. It’s like extending the capabilities of one function and adding more value to it. The above example was passing a function as an argument.

// Higher Order Function (Returning a function)

function greetings() { return function() { // Inner Anonymous function console.log("Hello!"); }; } const greet = greetings(); // Function invocation. greet(); // Inner Function invocation.

In the above example, greeting() is a higher-ordered function. When the greetings function is invoked it, in turn, returns another function. The inner function is an anonymous function that logs Hello! to the console. When greetings() is invoked it returns the inner function which is stored into a variable called greet, this variable is now a function expression that holds the inner anonymous function of greetings().

Higher-order functions help us write efficient and clean code while leveraging the functional programming concepts. There are various inbuilt functions that are actually Higher-ordered function such as .map() and .filter() functions of an Array. These functions are present in the prototype of Array.

Note: If you want to know about prototypes in javascript, I would recommend Prototyping Javascript.

// .map() function.

const array = [1,2,3,4] // mapping each element and returning its double.

const mappedArray = array.map(function(element){

return element*2;

}); console.log(mappedArray); // [2,4,6,8]

Notice how the map function takes in an anonymous function which takes all the elements in the array and returns the double of each element. As it takes in a function as an argument we can say it is a Higher-ordered function.