Skip to main content

Higher order functions


Higher-order functions allow JavaScript to be suitable for functional programming. Such functions are widely used in JavaScript. If you've programmed in JavaScript even a little, you've probably used them, perhaps without even realizing it.

To fully understand this concept, you should first understand functional programming and the concept of first class functions.

What is functional programming?

Functional programming is a branch of discrete mathematics and a programming paradigm, in which the computation process is interpreted as the calculation of the values ​​of functions in the mathematical sense of the latter (as opposed to functions as subroutines in procedural programming). [Wikipedia]

First class functions


If you are already learning JavaScript, you may have heard that JavaScript treats functions⚙️ as first-class objects. Functions in JavaScript are objects, just like in other functional programming languages. In JavaScript, functions⚙️ are a special type of object. These are Function objects. For example:

Live Editor

We now know what first-class functions are. You can start with higher-order functions.

Higher order functions


These are functions⚙️ that take a function⚙️ as an argument or return🔄 a function⚙️ as output.

For example, these higher-order functions are built into the language: map() filter() and reduce()

Example # 1. Change the numbers .push


Let's say we have an array of numbers. We want to create a new🆕 array that will contain the doubled values of the first one. Let's see how we can solve this problem with and without a higher-order function.

Without higher order function:

Live Editor

With the higher-order function map, the console option is:

Live Editor

We can write it even shorter using the "arrow function" syntax:

Live Editor

Example # 2. Computed values .map


Let's say we have an array that contains the birth years of different people. We need to create an array that will store their age.

For example: without a higher-order function⚙️ (classic - through the for() and push() loops)

Live Editor

With the higher order function map:

Live Editor

We reflash 🆕 a new array in one line of code📟.

Example # 3. With condition check .filter()


We have an array that contains objects with properties: name and age. We need to create🏗️ an array that will only contain adults (ie, age greater than or equal to 18).

Without a higher-order function (classic - through the for () and push () loops):

Live Editor

With a higher-order function filter with a built-in condition:

Live Editor

Creating your own higher-order function


So far, we've looked at higher-order functions that are built into the language. Now let's create such a function ourselves⚙️. Imagine JavaScript doesn't have a built-in map method. We can write it ourselves by creating a higher-order function.

Let's say we have a string array and we want to convert it to an array of numbers, where each element represents the length of the elements from the original array.

Live Editor

In the example above, we have created our own higher-order function mapFor(), which takes an array arr and a callback functionfn. This function loops through this array and calls the callback function fn inside the newArray.push() for each iteration, calculating the number of characters in the words of the array, the calculation algorithm of which is described 🖊️ in the form of the 2nd variable 🔔.

::: note callback A callback function is a function passed to another function as an argument, which is then called upon completion of an action.


The callback function⚙️ fn takes the current element of the array and returns🔄 the length of the current element, which is now stored in newArray. After the For() loop completes, newArray returns the length of the elements in lenArray.

Remember, any algorithm, no matter how small, consists of 3 stages:

  • Stage 1 - Initialization of variables 🔔 and functions
  • Stage 2 - Higher order function (logic)
  • Stage 3 - Conclusion of the answer.


We learned what higher-order functions are and took a look at several of them already built into the language👅. We learned to create them on our own.

Without going into details, higher-order functions⚙️ can be said as follows: these are functions⚙️ that can take a function⚙️ as an argument and even return a function⚙️.



Write to Discord chat.



First class functions:

  1. First class facilities
  2. Facilities of the fifth class
  3. Top class facilities

Higher order function:

  1. Takes a function as an argument or returns a function as output
  2. Only takes a function as an argument
  3. Only returns a function as output

Higher order function:

  1. It is unrealistic to create yourself
  2. Can only be used via built-in method
  3. You can create yourself

In order to understand how much you learned this lesson, take the test in the mobile application of our school on this topic or in our telegram bot.

JS Camp

  1. Exploring Higher-Order Functions in JavaScript
  2. Article "Higher-order functions in JavaScript"
  3. Expressive Javascript. Article "Higher-order functions"
  4. Code for Teens: The Perfect Beginner's Guide to Programming, Volume 1: Javascript - Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy K.


Dmitriy Vasilev



🐛 🎨 🖋


🖋 🐛 🎨

Become a Patron!