Now that we have learned the basics of Functional Programming we can start looking at one more concept to increase the set of tools that this paradigm provides.
Let’s start with the Wikipedia definition of a High Order Function:
In mathematics and computer science, a higher-order function (HOF) is a function that does at least one of the following:
takes one or more functions as arguments (i.e. a procedural parameter, which is a parameter of a procedure that is itself a procedure),
returns a function as its result.
High-order functions can be understood as passthrough function that enhances the functions passed as arguments with extra context and logic.
An example of this is the native Javascript functions for arrays like .map or .filter , which receives a function as a parameter that internally gets enhanced by the internal logic of these functions.
The opposite of a High Order function is a First-Order Function, which doesn’t take functions as arguments and doens’t return a function.
Let’s create a filter function that removes the even numbers from an array using a First Order Function.
Result
From that implementation we can identify a few problems:
- The functionality is coupled to work for a single scenario (removing event numbers).
- The array has a defined type and cannot be extended to work with other types.
Now let’s look at the same example but using a High Order Function.
Result
By making this change we enhance the passed attribute with the extra context that we already have from the previous implementation, resulting in the following advantages:
- By switching the static type for the array to use generics the function becomes more flexible.
- By passing having the filter logic decoupled from the actual implementation we can provide our own custom logic when executing the function.
If you normally work with Javascript you can find that High Order Functions are used quite a lot.
If you have worked with React, you might have heard about the High Order Component technique. Which inherits its concept from HFOs. In this case, instead of having a “function” as an argument or as an output, it changes to a Component (Class Components/ Functional Components).
To showcase this, let’s implement a High Order Component which retrieves the user session from the local storage and passes it to the returned component.
The output component here is the EnhancedComponent constant which can be directly used in any component and if we need any other component to extend this functionality we just have to pass it as a parameter of our WithSignal High Order Component.
Conclusion:
- High Order Functions can be used to enhance First-Order Functions.
- When working with Typescript, you will find many scenarios where High Order Functions are being used.
- Other concepts like High Order Components are inherited from the same Functional Programming principles as High Order Components.
This blog post is part of the Functional Programming with Typescript series on how to integrate functional programming principles for your application while keeping it type-safe with Typescript.
Introduction | Pev < | Next >
