Arrow-funktsioonide tõhus kasutamine JavaScriptis

JavaScript on aastate jooksul oluliselt arenenud ja pakkunud arendajatele aina võimsamaid tööriistu. Üks olulisemaid täiustusi uuemates versioonides on noole-funktsioonide (=>) tutvustamine ES6-ga. See uus süntaks mitte ainult ei tee funktsioone kompaktsemaks, vaid lahendab ka probleemid, mis on seotud this kontekstiga. Selles juhendis õpetan ma sulle noolefunktsioonide põhiteadmisi ja näitan, kuidas saad neid mõistlikult oma koodis kasutada.

Tähtsamad järeldused

• Noolefunktsioonid pakuvad lühemat süntaksit funktsioonide deklaratsiooniks ja tabavad this konteksti intuitiivsel viisil.
• Need on eriti kasulikud funktsionaalsuste jaoks, mis ootavad tagastusväärtusi väljendite kujul.
• Noolefunktsioonide kasutamine võib muuta koodi loetavamaks ja hooldatavamaks.

Sammsammuline juhend

Noolefunktsioonidel on oma süntaks, mis erineb traditsioonilisest funktsiooni deklaratsioonist. Vaadakem koos erinevaid aspekte sellest süntaksist, et mõista, kuidas see töötab ja kus seda kasutada saab.

Esiteks traditsioonilised funktsioonid JavaScriptis. Siin näed näidet, kuidas funktsioon deklareeritakse keyword function abil:

Me anname selle funktsiooni näiteks edasi setTimeout'ile, et käivitada anoniimne funktsioon pärast ühe sekundi möödumist:

See on standardmeetod funktsioonide kasutamiseks JavaScriptis. Kuid me saame seda süntaksit täiustada, jättes välja function märksõna ja kasutades selle asemel noolefunktsiooni. See saavutab sama eesmärgi, kuid vajab vähem koodirekke. Syntaks näeb välja selline:

Kui võtame praktilise näite, et seda selgitada. Ma deklareerime massiivi, mis sisaldab väärtusi 1 kuni 5:

Nüüd saame kasutada meetodit findIndex, et leida konkreetse väärtuse (nt 3) indeks massiivis. Traditsiooniliste funktsioonide kasutamisel näeb kood välja selline:

See toimib, aga laseme proovida noolefunktsiooni, et koodi parandada. Eemaldame function märksõna ja kasutame noole süntaksit:

Me saame isegi funktsiooni kehas rakendamise kiiremini, jättes välja kurdid ja return märksõna. Sellega tekib veel kompaktsem vorm:

See toimib suurepäraselt ja saame soovitud indeksi.

Noolefunktsioon on kompaktne ja lihtsustab oluliselt süntaksit. Teiseks eeliseks on this'i haldamine. Vaadakem eseme näidet. Sul on objekt, millel on meetod, mis pääseb objekti omadusele:

Kui kutsud seda meetodit setTimeoutiga ja kirjutad selle traditsioonilise funktsioonina, toob see kaasa probleemi. The this väljundiks ei ole enam oodatud objekt:

See this on määratlemata. Siiski, kui asendad function märksõna noolefunktsiooniga, jääb this ümbritsevas kontekstis kinnituks:

Siin peaks väljund olema õige ja displaying the text in console. Noolefunktsioon on käesolevas näites takistanud this konteksti kadumist.

Kus saame veel noolefunktsioone kasutada? Need on eriti praktilised, kui soovid funktsioone edastada meetoditele nagu map, filter või reduce. Need meetodid ootavad funktsiooni argumentidena ja saavad kasu lühemast süntaksist. Siin on lihtne näide koos map'iga, mis ruudutab massiivi elemente:

Teine kasulik funktsioon noolefunktsioonides on see, et sa ei pea kasutama kurde, kui su funktsioon tagastab ainult väljendi. See muudab koodi veelgi lihtsamaks ja selgemaks:

Pane siiski tähele, et teatud olukordades, nt mitmerealistest funktsioonikehadest, jääb function märksõna kasutamine hädavajalikuks. Seega sõltub sellest, kumba meetodit konteksti järgi valida.

Kokkuvõte - Noolefunktsioonid JavaScriptis selgelt selgitatud

Noolefunktsioonid on väärtuslik täiendus JavaScripts, mis mitte ainult ei vähenda kirjutamise koormust, vaid parandab ka koodi loetavust. Tänu nende intuitiivsele haldamisele this'is on nad eriti kasulikud kaasaegsetes veebirakendustes. Kui kasutad noolefunktsioone sobivates kohtades oma koodis, saad kasu olulisest hooldamise parandamisest.