Higher Order Functions: The Higher Order of Javascript
Tags: webdev, javascript, beginners, programming
Published: 2022-06-17 13:51:34

Functions are the bread and butter of Javascript. A function is a block of code that **TYPICALLY** takes in one or more arguments, performs a task with that argument and returns an output for us. Functions allow us to create a piece of code that performs a job, encapsulate it, and call it anywhere in our program without having to re-write the entire block over and over. So, now that we know the gist of what a function is, let's go a step higher *(oh, yeah I went there)* and see what a higher order function is about. A higher order function is a function that takes in a function as an argument or returns a function as an output. Still with me? Good! Now, that we understand what makes a higher order function a higher order function, let's take a look at a few of the most useful higher order functions in Javascript.

First up, we will talk about Filter. With the filter method we can take in an array of elements, 'filter' through it, and return just the elements that match our certain criteria. For example, we have a list of numbers and we want to return only the numbers over twenty, Well, filter has got you. 

![An example of using filter method to return only numbers in a given array that are greater than 20](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a9czd5hbp7eqwpvrl21.png)

As you can see, we are invoking the filter function on our array of numbers. Filter is iterating through the array and asking if each element is greater than twenty and if it is, it will put it into a new cool kid array of numbers over twenty and return it back to us. The filter method is a much easier, quicker and prettier way of finding elements of an array that match our parameters without writing long, arduous for loops and all that mess. Pretty cool right? Well, we're just getting started.

Next, we will take a look at the map method. What map does, is takes each element of an array and performs a function on them. So, back to our same array of numbers, say we wanted to add five to each number, map method to the rescue.

![An example of using map method to add five to every number in a given array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5jfyvitommk4cx6ghhf.png)

Map is iterating through our numbers array and adding five to each number, simple but extremely powerful. Map can have an enumerable amount of uses in web and software development.

Finally, let's see about reduce. The reduce method can be a little tricky but very useful. Just to keep it simple, we will check out a very basic use of reduce and have it add up all the numbers in our array and return the sum to us.

![An example of using reduce method to return the sum of the numbers in a given array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8bw9n0exi4tq1l7coot.png)

What is happening here? So, reduce is iterating through our numbers array and adding it to the *total* parameter we passed in there, giving us the sum of every number in our array added together. Again, this is a very basic example of what the reduce method is capable of but I think you get the idea.

Higher order functions are indispensable in programming. They will not only help you from writing loads of unnecessary code and save you tons of time but they will also prevent many errors that come along with writing so many loops and conditional statements. Also, your colleagues and co-workers won't despise your very existence for making look through so much bloated code to find your bugs. If nothing else, do it for them.