En hurtig introduktion til Higher Order-funktioner i JavaScript

Funktioner med højere ordre

En funktion, der accepterer og / eller returnerer en anden funktion kaldes en højere ordensfunktion .

Det er højere orden, fordi det går højere for at betjene funktioner i stedet for strenge, tal eller booleanske . Smuk meta.

Med funktioner i JavaScript kan du

• Gem dem som variabler
• Brug dem i arrays
• Tildel dem som objektegenskaber (metoder)
• Giv dem som argumenter
• Returner dem fra andre funktioner

Som ethvert andet stykke data . Det er nøglen her.

Funktioner fungerer på data

Strings Are Data

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

Tal er data

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

Booleanere er data

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

Objekter er data

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

Arrays er data

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

Disse 5 typer er førsteklasses borgere på alle almindelige sprog.

Hvad gør dem til førsteklasses? Du kan sende dem rundt, gemme dem i variabler og arrays, bruge dem som input til beregninger. Du kan bruge dem som ethvert stykke data .

Funktioner kan være data for

Fungerer som argumenter

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

Se hvordan filteranvendelser isEventil at beslutte, hvilke tal der skal holdes? isEven, en funktion , var en parameter til en anden funktion .

Det kaldes filterfor hvert nummer og bruger den returnerede værdi trueeller falsetil at afgøre, om et nummer skal opbevares eller kasseres.

Tilbagevendende funktioner

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

addkræver to parametre, men ikke alle på én gang. Det er en funktion, der beder om bare x, der returnerer en funktion, der beder om bare y.

Igen er dette kun muligt, fordi JavaScript tillader funktioner at være en returværdi - ligesom strenge, tal, booleanske osv.

Du kan stadig levere xog ystraks, hvis du ønsker det, en dobbelt påkaldelse

result = add(10)(20); 

console.log(result); // 30 

Eller xnu og ysenere:

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

Lad os spole det sidste eksempel tilbage. add10er resultatet af opkald addmed en parameter. Prøv at logge det i konsollen.

add10er en funktion, der tager a yog returnerer x + y. Når du har leveret y, skynder det dig at beregne og returnere dit slutresultat.

Større genanvendelighed

Den største fordel ved HOF'er er sandsynligvis større genanvendelighed. Uden dem, JavaScript premiere Array metoder -  map, filterog reduce - ville ikke eksistere!

Here’s a list of users. We’re going to do some calculations with their information.

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

Map

Without higher-order functions, we’d always need loops to mimic map's functionality.

getName = (user) => user.name; usernames = []; for (let i = 0; i < users.length; i++) { const name = getName(users[i]); usernames.push(name); } console.log(usernames); // ["Yazeed", "Sam", "Bill"] 

Or we could do this!

usernames = users.map(getName); console.log(usernames); // ["Yazeed", "Sam", "Bill"] 

Filter

In a HOF-less world, we’d still need loops to recreate filter's functionality too.

startsWithB = (string) => string.toLowerCase().startsWith('b'); namesStartingWithB = []; for (let i = 0; i < users.length; i++) { if (startsWithB(users[i].name)) { namesStartingWithB.push(users[i]); } } console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] 

Or we could do this!

namesStartingWithB = users.filter((user) => startsWithB(user.name)); console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] 

Reduce

Yup, reduce too… Can’t do much cool stuff without higher-order functions!! ?

total = 0; for (let i = 0; i < users.length; i++) { total += users[i].age; } console.log(total); // 75 

How’s this?

totalAge = users.reduce((total, user) => user.age + total, 0); console.log(totalAge); // 75 

Summary

• Strings, numbers, bools, arrays, and objects can be stored as variables, arrays, and properties or methods.
• JavaScript treats functions the same way.
• This allows for functions that operate on other functions: higher-order functions.
• Map, filter, and reduce are prime examples — and make common patterns like transforming, searching, and summing lists much easier!

Jeg er på Twitter, hvis du gerne vil tale. Indtil næste gang!

Pas på,

Yazeed Bzadough

yazeedb.com