Higher-Order Functions in JavaScript

“A higher-order function is a function that either takes a “function” as one of its parameters and/or returns a “function”. So, now the real question is why would you ever want to do this? Let’s explore.”

The first time I saw the notion of passing a function into a function or getting a function as a return value from a function. It just blew my mind. I was not able to wrap my mind around it, but when I understood the main idea behind it. The logic of Higher Order Functions becomes very intuitive and straightforward. Although it may sound complicated, it isn’t.

To fully understand this concept, We first have to understand the concept of First-Class Citizens.

What does First-Class Citizen mean?

“In programming language design, a first-class citizen in a given programming language is an entity which supports all the operations generally available to other entities. These operations typically include being passed as an argument, returned from a function, modified, and assigned to a variable.”

What this First-Class Citizenship has to do with functions?

“A programming language is said to have First-class functions when functions in that language are treated like any other variable. For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.”

JavaScript functions are a special type of object. They are Function objects. The only property which makes them special is that they can be called (executed).

To prove functions are objects in JavaScript, we could do something like this

NOTE : You should not add random properties to the function objects, use an object if you have to.

In JavaScript, everything you can do with other types can do with functions. You can pass them as parameters to other functions (callbacks), assign them to variables, pass them around, etc. This is why functions in JavaScript are known as First-Class Functions. Hence JavaScript gives First-Class Citizenship to functions.

Before getting into Higher Order Functions let’s recall -

Why do we even have functions?

Create a function that returns the square of 125, 63, 2, 5 ………

We can do this all day long, creating a function that squares a specific number. What principle are we breaking here? DRY (Don’t Repeat Yourself)

Hence, the main idea behind functions is “REUSABILITY”. We wrap functionality in a function and then reuse it as many times as we want. So, here that functionality is “squaring the number”, but our function is not quite reusable. We have to generalize it but how?

Generalizing functions

We can introduce ‘Parameters’ (placeholders) meaning we don’t need to decide what data to run our functionality on until we run the function. Now, provide an actual value (‘argument’) when we run the function.

Now, this little function can square any number we pass it to.

Higher order functions follow this same principle. We may not want to decide exactly what some of our functionality is until we run our function

What principle are we breaking? DRY — Don’t Repeat Yourself
As we already know the main idea behind functions is “REUSABILITY”. But in our above example, we are writing the same code again and again with just one line changing which technically changes the whole functionality. Now the question is can we do better? Can we generalize this function more?

The answer is “YES”

This is where the Higher Order function comes into the picture. We can wrap that little functionality in a function (callback) and pass that function to another function(Higher Order Function).

Callbacks and Higher Order Functions simplify our code and keep it DRY

Declarative readable code: Map, filter, reduce — the most readable way to write code to work with data

Asynchronous JavaScript: Callbacks are a core aspect of async JavaScript, and are under-the-hood of promises, async/await

Few built In JavaScript Higher Order Functions

1. map()

Map method is one of the most common higher-order functions. It takes a function to run on every item in the array. Then it returns a modified copy of the original array.

2. filter()

Filter method creates a new array with all elements that pass the condition provided by the callback function.

3. reduce()

Filter method creates a new array with all elements that pass the condition provided by the callback function.

The reduce method takes each member of the calling array and passes them to the callback which results in a single output value. The reduce method accepts two parameters: 1) The reducer function (callback), 2) and an optional initialValue.

The callback accepts four parameters: accumulator, currentValue, currentIndex, sourceArray.

If an initialValue is provided, then the accumulator will be equal to the initialValue and the currentValue will be equal to the first element in the array.

If no initialValue is provided, then the accumulator will be equal to the first element in the array and the currentValue will be equal to the second element in the array.