Higher order functions in javascript: what is it?

We present you a translation of the article Sukhjinder Arora , published on the resource Bits and Pieces . Learn under the cat about the higher order functions in JavaScript and some other functions built into this language.





Photo NESA by Makers from Unsplash website



When learning to program in JavaScript, you must have come across the concept of higher order functions . Although this concept may seem frightening, in fact, everything is not so difficult.



Thanks to the ability to work with higher-order functions, JavaScript is suitable for functional programming.

')

Higher-order functions are common in JavaScript. If you worked with it for some time, it is very likely that you used such functions without even realizing it.



To get a complete picture of higher-order functions, you first need to understand what functional programming and first-class functions are .



Tip : Repeated use of JavaScript functions often leads to duplicates. To avoid this, use Bit (GitHub) . You can easily find new functions, share them and re-apply them with minimal changes in management. Try, do not hesitate.

What is functional programming?

Without going into details, functional programming is programming, in which some functions are passed as arguments to other functions and return third functions as values. In functional programming, we think and operate with functions.



Functional programming is done in languages ​​such as JavaScript, Haskell, Clojure, Scala, and Erlang.

What are first class features?

When learning to work with JavaScript, you most likely heard that for it functions are first-class citizens. The fact is that in JavaScript, as in any other functional programming language, functions are objects.



Specifically for JavaScript, functions are objects of a special kind ( Function objects, or functors). For example:

 function greeting() { console.log('Hello World'); } // Invoking the function greeting(); // prints 'Hello World' 

To show that functions in JavaScript are objects, we can do something like this:

 // We can add properties to functions like we do with objects greeting.lang = 'English'; // Prints 'English' console.log(greeting.lang); 

Note: although the above described works fine in javascript, you shouldn’t abuse it. It is impossible to assign random properties to functors - it is better to use ordinary objects.



In JavaScript, everything you can do with other entities, such as an object, a string, or a number, also applies to functions. They can be passed, including as arguments to other functions (then they are called callback-functions or callback functions), assigned to variables, and so on. This is why JavaScript functions are called first class functions.

Assigning Functions to Variables

JavaScript allows you to assign functions to variables. For example:

 const square = function(x) { return x * x; } // prints 25 square(5); 

You can also transfer them. For example:

 const foo = square; // prints 36 foo(6); 

Passing functions as arguments

We can pass functions as arguments to other functions. For example:

 function formalGreeting() { console.log("How are you?"); } function casualGreeting() { console.log("What's up?"); } function greet(type, greetFormal, greetCasual) { if(type === 'formal') { greetFormal(); } else if(type === 'casual') { greetCasual(); } } // prints 'What's up?' greet('casual', formalGreeting, casualGreeting); 

So now, knowing what functions are first class, let's turn to higher order functions in JavaScript.

Higher order functions

Higher-order functions are functions that work with other functions, taking a function as an argument or returning a function as a result.



Examples of higher-order functions that are already built into the language are Array.prototype.map , Array.prototype.filter and Array.prototype.reduce .

Higher order functions in action

Let's look at a few examples of higher-order built-in functions and compare them with solutions that do not use higher-order functions.



Array.prototype.map

The map() method creates a new array with the result of calling the function to be passed for each element of the initial array. The map() method takes each value of a callback function and creates a new array using these values.



The callback function passed to the map() method takes three arguments: element , index and array .



Consider this with a few examples.



Example №1

Suppose we have an array of numbers, and from it we want to create a new array in which each number from the initial array would be doubled. How can we solve this problem with and without a higher order function?



No higher order function:

 const arr1 = [1, 2, 3]; const arr2 = []; for(let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2); } // prints [ 2, 4, 6 ] console.log(arr2); 

Using the higher order map function:

 const arr1 = [1, 2, 3]; const arr2 = arr1.map(function(item) { return item * 2; }); console.log(arr2); 

The code can be made even shorter by using the arrow function.

 const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); console.log(arr2); 

Example 2

Let's say we have an array containing the years of birth of several people, and from it we want to create a new array in which their ages will be.



No higher order function:

 const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = []; for(let i = 0; i < birthYear.length; i++) { let age = 2018 - birthYear[i]; ages.push(age); } // prints [ 43, 21, 16, 23, 33 ] console.log(ages); 

Using the higher order map function:

 const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = birthYear.map(year => 2018 - year); // prints [ 43, 21, 16, 23, 33 ] console.log(ages); 

Array.prototype.filter

The filter() method creates a new array with all the elements that pass the test specified in the function being passed. The callback function passed to the filter() method takes three arguments: element , index and array .



Consider this with a few examples.



Example №1

Imagine that we have an array containing objects with the properties “name” and “age”. From it, we want to create a new array, in which only adults (eighteen and older) will be listed.



No higher order function:

 const persons = [ { name: 'Peter', 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]); } } console.log(fullAge); 

Using the highest order filter function:

 const persons = [ { name: 'Peter', age: 16 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24}, ]; const fullAge = persons.filter(person => person.age >= 18); console.log(fullAge); 

Array.prototype.reduce

The reduce method applies a function to each value of the array, reducing it to a single value. The reduce method takes two arguments:

1. callback function to be processed;
2. optional parameter initialValue (the first argument at the first call of the function).

The callback function takes four arguments: accumulator , currentValue , currentIndex , sourceArray .



If the initialValue parameter was passed, the accumulator argument will be equal to the initialValue argument and the currentValue argument to the first element of the array.



If the initialValue parameter was not passed, the accumulator argument will be equal to the first element of the array, and the second element of the array will be taken as the currentValue argument.



Example №1

Suppose we need to find the sum of the numbers in the array.



Using the reduce higher function:

 const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }); // prints 25 console.log(sum); 

Each time a callback function is applied to each value from the array, the accumulator argument stores the result of the previous action returned by the function, and the currentValue takes the next value of the array. Upon completion, the result is stored in the variable sum .



In addition, we can pass this function an initial value:

 const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 10); // prints 35 console.log(sum); 

No higher order function:

 const arr = [5, 7, 1, 8, 4]; let sum = 0; for(let i = 0; i < arr.length; i++) { sum = sum + arr[i]; } // prints 25 console.log(sum); 

As you can see, with the help of the higher order function, the code can be made neater, shorter and more capacious.

Creating your own higher order function

Up to this point, we have considered various higher-order functions built into the language. It's time to create your own higher order function.



Imagine that JavaScript would not have its own map method. We could build it ourselves, thereby creating our own higher order function.



Let's say we have an array of strings, and from it we want to create an array of integrals, in which each element will represent the length of a string from the initial array.

 const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C']; function mapForEach(arr, fn) { const newArray = []; for(let i = 0; i < arr.length; i++) { newArray.push( fn(arr[i]) ); } return newArray; } const lenArray = mapForEach(strArray, function(item) { return item.length; }); // prints [ 10, 6, 3, 4, 1 ] console.log(lenArray); 

In the example above, we created a higher-order function mapForEach , which takes an array as arguments and a callback function fn . This function is cyclically applied to each element of the array and calls the callback function fn as part of the call to the newArray.push function in each iteration.



The fn callback function takes the current element of the initial array and returns the length of this element, which is stored inside the new array newArray . After the iteration is completed, the newArray array newArray returned as a result and is assigned by the lenArray array.

Conclusion

We learned what higher-order functions are and examined some of the functions built into the language. We also learned how to create your own higher-order functions.



In short, higher order functions work like normal functions, but they have the additional ability to get other functions as an argument and return them as a result.



That's all. If this article seemed useful to you, you can also follow me on Medium and on Twitter . Feel free to comment - if you have questions! I will be happy to help. :)