Kratki uvod u funkcije višeg reda u JavaScript-u

Funkcije višeg reda

Funkcija koja prihvaća i / ili vraća drugu funkciju naziva se funkcijom višeg reda .

To je višeg reda , jer umjesto žice, brojeva ili boolean funkcije, to ide veći za rad na funkcije. Lijepa meta.

Pomoću funkcija u JavaScript-u možete

  • Pohranite ih kao varijable
  • Koristite ih u nizovima
  • Dodijelite ih kao svojstva objekta (metode)
  • Proslijedite ih kao argumente
  • Vratite ih s ostalih funkcija

Kao i svaki drugi podatak . To je ovdje ključno.

Funkcije djeluju na podacima

Nizovi su podaci

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

Brojevi su podaci

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

Booleovi podaci

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

Predmeti su podaci

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

Nizovi su podaci

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

Ovih 5 tipova prvorazredni su građani u svim uobičajenim jezicima.

Što ih čini prvorazrednima? Možete ih proslijediti, pohraniti u varijable i nizove, koristiti kao ulaze za izračune. Možete ih koristiti kao bilo koji podatak .

Funkcije mogu biti i podaci

Funkcije kao argumenti

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

Pogledajte kako se filterkoristi isEvenza odlučivanje koje brojeve zadržati? isEven, funkcija , bila je parametar drugoj funkciji .

Pozva se filterza svaki broj i koristi vraćenu vrijednost trueili falseda utvrdi treba li broj zadržati ili odbaciti.

Povratne funkcije

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

addzahtijeva dva parametra, ali ne odjednom. To je funkcija koja traži pravedno x, koja vraća funkciju koja traži pravedno y.

Opet, to je moguće samo zato što JavaScript dopušta funkcijama povratnu vrijednost - baš poput nizova, brojeva, logičkih vrijednosti itd.

I dalje možete isporučiti xi yodmah, ako želite, dvostruko zazivanje

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

Ili xsada i ykasnije:

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

Vratimo taj zadnji primjer. add10je rezultat pozivanja adds jednim parametrom. Pokušajte ga prijaviti u konzolu.

add10je funkcija koja uzima a yi vraća se x + y. Nakon isporuke y, požuruje se s izračunavanjem i vraćanjem vašeg krajnjeg rezultata.

Veća ponovna upotrebljivost

Vjerojatno najveća korist od HOF-a je veća ponovna upotreba. Bez njih JavaScript je metoda premijera Array -  map, filteri reduce - ne bi postojati!

Evo popisa korisnika. Izvršit ćemo neke izračune s njihovim podacima.

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

Karta

Bez funkcija višeg reda, uvijek bi nam trebale petlje da oponašamo mapfunkcionalnost.

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"] 

Ili bismo mogli ovo!

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

filtar

U svijetu bez HOF-a, i dalje ćemo trebati petlje za ponovno stvaranje filterfunkcionalnosti.

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 }] 

Ili bismo mogli ovo!

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

Smanjiti

Da, i smanjite ... Ne mogu raditi puno cool stvari bez funkcija višeg reda !! ?

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

Kako je ovo?

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

Sažetak

  • Nizovi, brojevi, bools, nizovi i objekti mogu se pohraniti kao varijable, nizovi i svojstva ili metode.
  • JavaScript se prema funkcijama odnosi na isti način.
  • To omogućuje funkcije koje djeluju na druge funkcije: funkcije višeg reda .
  • Mapiranje, filtriranje i smanjivanje glavni su primjeri - i čine zajedničke obrasce poput pretvaranja, pretraživanja i sažimanja popisa mnogo lakšim!

I’m on Twitter if you’d like to talk. Until next time!

Take care,

Yazeed Bzadough

yazeedb.com