Gyors bevezető a magasabb rendű funkciókhoz a JavaScript-ben

Magasabb rendű funkciók

Egy másik függvényt elfogadó és / vagy visszaadó függvényt magasabb rendű függvénynek nevezünk .

Ez a magasabb rendű , mert ahelyett karakterláncok, számok vagy logikai értékek, akkor megy a magasabb működését a funkciókat. Elég meta.

A JavaScript-ben található funkciók segítségével

  • Tárolja őket változóként
  • Használja őket tömbökben
  • Rendelje őket objektum tulajdonságokként (módszerek)
  • Adja át őket érvként
  • Helyezze vissza őket más funkciókból

Mint minden más adat . Ez itt a kulcs.

A funkciók az adatokon működnek

A karakterláncok adatok

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

A számok adatok

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

A logikai adatok adatok

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

Az objektumok adatok

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

A tömbök adatok

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

Ez az 5 típus első osztályú állampolgár, minden általános nyelven.

Mi teszi őket első osztályúvá? Átadhatja őket, változókban és tömbökben tárolhatja őket, felhasználhatja őket a számítások inputjaként. Használhatja őket, mint bármely adat .

A funkciók is lehetnek adatok

Funkciók mint érvek

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

Nézze meg, hogyan filterhasználhatja isEvenannak eldöntését, hogy mely számokat őrizze meg? isEven, egy függvény egy másik függvény paramétere volt .

filterMinden számra hívja , és a visszatérő értéket használja, truevagy falseannak meghatározásához, hogy egy számot meg kell-e őrizni vagy el kell dobni.

Visszatérő függvények

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

addkét paramétert igényel, de nem egyszerre. Ez egy függvény, amely csak kér x, ami visszaadja az igazságot kérő függvényt y.

Ez megint csak azért lehetséges, mert a JavaScript lehetővé teszi a függvények visszatérési értékét - akárcsak a karakterláncok, számok, logikai értékek stb.

Még mindig szállíthat, xés yha akarja, azonnal, dupla meghívással

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

Vagy xmost és ykésőbb:

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

Tekerjük vissza ezt az utolsó példát. egy paraméterrel add10történő hívás eredménye add. Jelentkezzen be a konzolba.

add10olyan függvény, amely a-t veszi yés visszatér x + y. Miután ymegadta, siet a végeredmény kiszámításával és visszaadásával.

Nagyobb újrafelhasználhatóság

A HOF-ek valószínűleg legnagyobb előnye a nagyobb újrafelhasználhatóság. Ezek nélkül a JavaScript premier Array módszerek -  map, filterés reduce - nem létezik!

Itt van a felhasználók listája. Számos számítást fogunk végezni az információikkal.

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

Térkép

Magasabb rendű funkciók nélkül mindig szükségünk lenne hurkokra, hogy utánozzuk a mapfunkcionalitást.

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

Vagy megtehetnénk ezt!

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

Szűrő

A HOF nélküli világban továbbra is szükségünk van hurkokra a filterfunkcionalitás újrateremtéséhez .

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

Vagy megtehetnénk ezt!

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

Csökkentse

Igen, csökkentsd is ... Nem lehet sok jó dolgot csinálni magasabb rendű funkciók nélkül !! ?

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

Hogy van ez?

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

Összegzés

  • A karakterláncok, számok, boolok, tömbök és objektumok változókként, tömbökként, tulajdonságokként vagy módszerekként tárolhatók.
  • A JavaScript ugyanúgy kezeli a funkciókat.
  • Ez lehetővé teszi olyan funkciókat, amelyek más funkciókon is működnek: magasabb rendű funkciók .
  • A térkép, a szűrés és a kicsinyítés kiemelkedő példa - és sokkal egyszerűbbé teheti a szokásos mintákat, például a listák átalakítását, keresését és összegzését!

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

Take care,

Yazeed Bzadough

yazeedb.com