Detailed introduction to JavaScript high-order functions (with code)

This article brings you a detailed introduction to JavaScript high-order functions (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

Use functions as data and unlock some powerful patterns.

Higher-order functions

A function that accepts and/or returns another function is called a higher-order function.

The reason why it is high-level is that it is not a string, number or Boolean value, but operates the function from a higher level. Beautiful meta.

Using functions in JavaScript, you can

• Store them as variables
• Use them in arrays
• Specify them as objects Properties (Methods)
• Pass them as arguments
• Return them from other functions

Just like all other data . This is the key.

Function operation data

String is data

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');
console.log(result); // 'Hi, User!'

Number is data

double = (x) => x * 2;
result = double(4);
console.log(result); // 8

Boolean type is data

getClearance = (allowed) => allowed ?
  'Access granted' :
  'Access denied';
result1 = getClearance(true);
result2 = getClearance(false);
console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

Object is data

getFirstName = (obj) => obj.firstName;
result = getFirstName({
  firstName: 'Yazeed'
});
console.log(result); // 'Yazeed'

Arrays are data

len = (array) => array.length;
result = len([1, 2, 3]);
console.log(result); // 3

These 5 types are first-class citizens in all major languages.

What makes them first-class citizens? You can pass them around, store them in variables and arrays, and use them as input to calculations. You can use them like any data.

Functions can also be used as data

#4 ways to use functions as data in JavaScript:

1. Pass them as parameters to other functions
2. Set them as object properties
3. Save them in an array
4. Set them as variables

Function as parameter

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);
console.log(result); // [2, 4]

See how filter uses isEven to decide which numbers to keep? isEven is a function that is a parameter of another function .

It is called by the filter for each number, and uses the return value true or false to determine whether the number should be kept or discarded.

Return function

add = (x) => (y) => x + y;

add requires two parameters, but not all at once. This is a function that takes only x, and it returns a function that takes only y. Because JavaScript allows functions to be return values ​​- just like strings, numbers, and booleans.

If you wish, you can still provide x and y immediately and make a double call

result = add(10)(20);
console.log(result); // 30

or x first and theny:

add10 = add(10);
result = add10(20);
console.log(result); // 30

Let’s go back to the last example. add10 is the result of calling add with one argument. and output it to the console.

add10 is a function that accepts a y and returns x y. After you provide y, it will immediately calculate and return the final result you want.

Higher reusability

Perhaps the biggest benefit of higher-order functions is higher reusability. Without it, the main JavaScript array methods - map, filter and reduce would not exist!

This is a user list. We're going to do some calculations on their information.

users = [{
  name: 'Yazeed',
  age: 25
}, {
  name: 'Sam',
  age: 30
}, {
  name: 'Bill',
  age: 20
}];

Map

If there is no higher-order function, we need to use a loop to imitate the function of map.

getName = (user) => user.name;
usernames = [];
for (let i = 0; i <p>Or we can do this! </p><pre class="brush:php;toolbar:false">usernames = users.map(getName);
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filter

In a world without higher-order functions, we still need loops to reimplement the functionality of filter.

startsWithB = (string) => string
  .toLowerCase()
  .startsWith('b');
namesStartingWithB = [];
for (let i = 0; i <p>Or we can do this! </p><pre class="brush:php;toolbar:false">namesStartingWithB = users
  .filter((user) => startsWithB(user.name));
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Reduce

Yes, reduce... without higher-order functions, you can’t achieve so many cool things!!

The above is the detailed content of Detailed introduction to JavaScript high-order functions (with code). For more information, please follow other related articles on the PHP Chinese website!