Original article by Sukhjinder Arora

Translator: UC International R&D Jothy



Write in the front: welcome to the “UC International technology” public number, we will provide you with client, server, algorithm, test, data, front-end and other related high-quality technical articles, not limited to original and translation.


This article will give you an idea of what high-level functions are and how to use them in JavaScript.

If you are learning JavaScript, then you should see the term high order function. It sounds complicated, but it’s not difficult.

What makes JavaScript suitable for functional programming is that it accepts higher-order functions.

Higher-order functions are widely used in JavaScript. If you’ve been programming in JavaScript for a while, you’ve probably used them without even knowing it.

To fully understand this concept, you must First understand functional programming and the concept of first-class Functions.



What is functional programming

In most simple terms, a function is a form of programming where you pass functions as arguments to other functions and return them as values. In functional programming, we think and program in terms of functions.

JavaScript, Haskell, Clojure, Scala, and Erlang are languages that partially implement functional programming.



The wait function

If you’re learning JavaScript, you’ve probably heard that JavaScript treats functions as first-class citizens. That’s because in JavaScript and other functional programming languages, functions are objects.

In JavaScript, a function is a special type of object. They’re Function Objects. Such as:

To prove that functions in JavaScript are objects, we can do this:

Note – While this is perfectly valid in JavaScript, it is considered a harmful practice. You should not add random properties to function objects; if you have to, use objects.

In JavaScript, all the operations you perform on other types (such as objects, strings, or numbers) can be performed on functions. You can pass them as arguments to other functions (callbacks), assign them to variables and pass them, etc. This is why functions in JavaScript are called first-class functions.



Assign a function to a variable

We can assign functions to variables in JavaScript. Such as:

We can also pass them on. Such as:



Pass the function as an argument

We can pass functions as arguments to other functions. Such as:

Now that we know what first-class functions are, let’s learn about higher-order functions in JavaScript



Higher-order functions

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them. Simply put, a higher-order function is a function that receives a function as an argument or returns a function as an output.

For example, array.prototype. map, array.prototype. filter, and array.prototype. reduce are higher-order functions built into the language.



Hands-on higher-order functions

Let’s take a look at some examples of built-in higher-order functions and see how they compare to alternatives that don’t use higher-order functions.



Array.prototype.map

The map() method creates a new array by calling the callback function for each element in the input array.

The map() method takes each of the return values in the callback function and uses them to create a new array.

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

Let’s look at some examples:


Case 1:

Suppose we have an array of numbers, and we want to create a new array that contains twice the value of each of the values in the first array. Let’s look at how to solve problems with and without higher-order functions.

Don’t use higher-order functions



Use the higher-order function map

Using the arrow function syntax would be even shorter:

Example 2:

Suppose we have an array of different people’s birth years, and we want to create an array of their ages. Such as:

Don’t use higher-order functions



Use higher-order functions

Array.prototype.filter

The filter() method creates a new array containing all the elements that passed the callback test. The callback function passed to the filter() method takes three arguments: Element, index, and array.

Let’s look at some examples:

Case 1:

Suppose we have an array of objects that contain the name and age attributes. We want to create an array containing only adults (age 18 or greater).

Don’t use higher-order functions



Use higher-order functions

Array.prototype.reduce

The reduce method performs a callback function for each element of the call array, generating a single value and returning it. The reduce method takes two arguments: 1) the Reducer function (callback), and 2) an optional initialValue.

The reducer function (callback) accepts four parameters: Accumulator, currentValue, currentIndex, and sourceArray.

If initialValue is provided, then the accumulator will be equal to initialValue and currentValue will be equal to the first element in the array.

If initialValue is not provided, the accumulator will be equal to the first element in the array, and currentValue will be equal to the second element in the array.

Case 1:

Suppose we want to sum an array of numbers:

Use the higher-order function reduce

Each time the reducer function is called for a value in an array, the accumulator retains the result returned by the previous reducer operation and sets currentValue to the currentValue of the array. The result is stored in the sum variable.

We can also provide initial values for it:



Don’t use higher-order functions 

As you can see, using higher-order functions makes our code cleaner and cleaner.Copy the code




Create our own higher-order functions

So far, we’ve seen a variety of higher-order functions built into the language. Now let’s create our own higher-order function.

We assume that JavaScript does not have a native map method. We can build it ourselves to create our own higher-order functions. Suppose we have an array of strings that we want to convert to an array of integers, where each element represents the length of the string in the original array.

In the example above, we created a higher-order function, mapForEach, that takes an array and a callback function, fn. It loops through the passed array and calls the callback fn in the newarray. push method on each iteration.

The fn callback takes the current element of the array and returns the length of that element, which is stored in newArray. After the for loop completes, newArray is returned and assigned to lenArray.



conclusion

You’ve looked at higher-order functions and some of the built-in higher-order functions, and you’ve learned how to create your own.



In short, a higher-order function is a function that can take a function as an argument or even return a function. It is just like a regular function, with the added ability to receive and return other functions, that is, arguments and outputs.

The above. If you found this article useful, please give me a like ~👏


English text: https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad


HTTP/3 is here. What are you waiting for? To know about the (https://mp.weixin.qq.com/s/ZH5GjB_LjMmfgO6_tYHJdA)

— — — — — — — — — — — — — — — —

UC Technology International is committed to sharing high quality technical articles with you

Welcome to wechat search UC International technology to follow our public account

Or share it with your friends