Higher order functions

@serverSerrverlesskiy

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

First_class

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

function learnJavaScript() {
  let greeting = () => 'Hello, World!'

  return greeting()
}

function learnJavaScript() {
  let greeting = () => 'Hello, World!'

  return greeting()
}

Result

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

Higher order functions

Higher

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`

Edit_number

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

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = []

  for (let i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i] * 2) // the arr2 array grows in a loop
  }

  return arr2 // 2, 4, 6, 8 only without spaces
}

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = []

  for (let i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i] * 2) // the arr2 array grows in a loop
  }

  return arr2 // 2, 4, 6, 8 only without spaces
}

Result

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

Live Editor

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = arr1.map(function (item) {
    // Old variant
    return item * 2 + ' '
  })
  return arr2
}

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = arr1.map(function (item) {
    // Old variant
    return item * 2 + ' '
  })
  return arr2
}

Result

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

Live Editor

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4, 5]
  const multTwo = item => item * 2 + ' '

  const arr2 = arr1.map(multTwo) // Algorithm in 1 line

  return arr2
}

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4, 5]
  const multTwo = item => item * 2 + ' '

  const arr2 = arr1.map(multTwo) // Algorithm in 1 line

  return arr2
}

Result

Example # 2. Computed values `.map`

Math

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

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  const ages = []
  for (let i = 0; i < birthYear.length; i++) {
    let ageNew = 2020 - birthYear[i] + ' ' // The current value of the new array
    ages.push(ageNew) // push the new value into the ages [] array
  }

  return ages // [ 45, 23, 18, 25, 35 ] only without spaces
}

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  const ages = []
  for (let i = 0; i < birthYear.length; i++) {
    let ageNew = 2020 - birthYear[i] + ' ' // The current value of the new array
    ages.push(ageNew) // push the new value into the ages [] array
  }

  return ages // [ 45, 23, 18, 25, 35 ] only without spaces
}

Result

With the higher order function map:

Live Editor

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  let ages = birthYear.map(year => 2020 - year + ' ') // 1-line algorithm via arrow function
  return ages // [ 45, 23, 18, 25, 35 ]
}

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  let ages = birthYear.map(year => 2020 - year + ' ') // 1-line algorithm via arrow function
  return ages // [ 45, 23, 18, 25, 35 ]
}

Result

We reflash a new array in one line of code.

Example # 3. With condition check `.filter()`

Check

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

function learnJavaScript() {
  const persons = [
    { name: 'Niki', age: 16 },
    { name: 'Mark', age: 18 },
    { name: 'John', age: 27 },
    { name: 'Jane', age: 14 },
    { name: 'Tony', age: 24 }
  ]

  const fullAge = []
  for (let i = 0; i < persons.length; i++) {
    if (persons[i].age >= 18) {
      fullAge.push(persons[i])
    }
  }

  return fullAge.length // number of persons over 18 years old
}

function learnJavaScript() {
  const persons = [
    { name: 'Niki', age: 16 },
    { name: 'Mark', age: 18 },
    { name: 'John', age: 27 },
    { name: 'Jane', age: 14 },
    { name: 'Tony', age: 24 }
  ]

  const fullAge = []
  for (let i = 0; i < persons.length; i++) {
    if (persons[i].age >= 18) {
      fullAge.push(persons[i])
    }
  }

  return fullAge.length // number of persons over 18 years old
}

Result

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

Live Editor

function learnJavaScript() {
  const persons = [
    { name: 'Niki', age: 34 },
    { name: 'Mark', age: 18 },
    { name: 'John', age: 27 },
    { name: 'Jane', age: 14 },
    { name: 'Tony', age: 24 }
  ]
  const fullAge = persons.filter(person => person.age >= 18) // Algorithm with a condition in 1 line

  return fullAge.length // number of persons over 18 years old
}

function learnJavaScript() {
  const persons = [
    { name: 'Niki', age: 34 },
    { name: 'Mark', age: 18 },
    { name: 'John', age: 27 },
    { name: 'Jane', age: 14 },
    { name: 'Tony', age: 24 }
  ]
  const fullAge = persons.filter(person => person.age >= 18) // Algorithm with a condition in 1 line

  return fullAge.length // number of persons over 18 years old
}

Result

Creating your own higher-order function

Create

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

function learnJavaScript() {
  // Source array
  const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS']
  // higher order function mapForEach () takes a formal (hypothetical) function fn and a formal array arr
  let mapFor = (arr, fn) => {
    const newArray = []
    for (let i = 0; i < arr.length; i++) {
      newArray.push(fn(arr[i])) // We apply the hidden function fn () to each element
    }
    return newArray // Returning a new array
  }
  // The main conversion code - mapForEach() is called with specific parameter values
  const lenArray = mapFor(strArray, item => item.length + ' ')

  return 'Word length: ' + lenArray // [ 7, 10, 5, 10, 3 ]
}

function learnJavaScript() {
  // Source array
  const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS']
  // higher order function mapForEach () takes a formal (hypothetical) function fn and a formal array arr
  let mapFor = (arr, fn) => {
    const newArray = []
    for (let i = 0; i < arr.length; i++) {
      newArray.push(fn(arr[i])) // We apply the hidden function fn () to each element
    }
    return newArray // Returning a new array
  }
  // The main conversion code - mapForEach() is called with specific parameter values
  const lenArray = mapFor(strArray, item => item.length + ' ')

  return 'Word length: ' + lenArray // [ 7, 10, 5, 10, 3 ]
}

Result

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.

Conclusion

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⚙️.