Kiire sissejuhatus JavaScripti kõrgema järgu funktsioonidele

Kõrgema järgu funktsioonid

Funktsiooni, mis aktsepteerib ja / või tagastab teise funktsiooni, nimetatakse kõrgema järgu funktsiooniks .

See on kõrgemat järku, kuna stringide, arvude või booleanide asemel läheb see funktsioonide opereerimiseks kõrgemale . Päris meta.

JavaScripti funktsioonidega saate seda teha

  • Salvestage need muutujatena
  • Kasutage neid massiivides
  • Määrake need objekti omadusteks (meetodid)
  • Edastage need argumentidena
  • Tagastage need muudest funktsioonidest

Nagu kõik muud andmed . See on siin võti.

Funktsioonid töötavad andmetega

Stringid on andmed

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

Numbrid on andmed

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

Booleanid on andmed

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

Objektid on andmed

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

Massiivid on andmed

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

Need viis tüüpi on esmaklassilised kodanikud igas tavakeeles.

Mis teeb neist esmaklassilised? Saate neid mööda saata, salvestada muutujatesse ja massiividesse, kasutada neid arvutuste sisendina. Saate neid kasutada nagu kõiki andmeid .

Funktsioonid võivad olla ka andmed

Funktsioonid argumentidena

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

Vaadake, kuidas filterkasutatakse isEvennumbreid otsustades? isEven, funktsioon oli teise funktsiooni parameeter .

Seda kutsutakse filteriga numbri jaoks ja see kasutab tagastatud väärtust truevõi selleks, falseet teha kindlaks, kas number tuleks alles jätta või ära visata.

Funktsioonide tagastamine

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

addnõuab kahte parameetrit, kuid mitte kõiki korraga. See on funktsioon, mis küsib lihtsalt x, mis tagastab funktsiooni, mis küsib lihtsalt y.

Jällegi on see võimalik ainult seetõttu, et JavaScript võimaldab funktsioonidel olla tagastusväärtus - täpselt nagu stringid, numbrid, booleanid jms.

Saate endiselt pakkuda xja ysoovi korral kohe ka topeltkutsega

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

Või xnüüd ja yhiljem:

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

Keerame selle viimase näite tagasi. add10on addühe parameetriga helistamise tulemus . Proovige see konsooli sisse logida.

add10on funktsioon, mis võtab a yja tagastab x + y. Pärast tarnimist ykiirustab lõpptulemuse arvutamine ja tagastamine.

Suurem korduvkasutus

Tõenäoliselt on HOFide suurim eelis suurem korduvkasutus. Ilma nendeta JavaScript esietendus Array meetodid -  map, filterja reduce - ei eksisteeri!

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!

Olen Twitteris, kui soovite rääkida. Järgmise korrani!

Ole tubli,

Yazeed Bzadough

yazeedb.com