Noolfunktsioonid JavaScriptis - Tõhus kasutamine

Funktsioonid on JavaScripti süda. Kui varem olid nad seotud function-märksõna kasutamisega, siis ES6 toob endaga kaasa uue ja elegantsema süntaksi nn Arrow-funktsioonidega. See uus süntaks mitte ainult ei tee su koodi lühemaks, vaid lahendab ka mõned probleemid, mis on seotud this-kontekstiga. Selles juhendis saad teada kõik vajaliku Arrow-funktsioonide kohta.

Olulisemad teadmised

• Arrow-funktsioonid pakuvad võrreldes tavaliste funktsioonidega lühemat süntaksit.
• Neil pole enda this-konteksti, mis muudab nad eriti praktiliseks tagasikutsefunktsioonide kasutamisel.
• Olles vaid ühe avaldise tagastav funktsioon, on võimalik jätta välja looksulud ja return-käsklus.

Arrow-funktsioonide tutvustus

Arrow-funktsioone kasutatakse tavaliselt selleks, et muuta kood loetavamaks ja kompaktsemaks. Selle asemel, et kirjutada function, saad kasutada uut süntaksit, et deklareerida funktsioon lühemalt.

Arrow-funktsioonide mõistmiseks saab traditsioonilisi funktsioone hästi kasutada alguspunktina. Kui sa deklareerid funktsiooni function-märksõnaga, võib see olla tavaliselt pikem ja vähem elegantne. Siin on näide tavalisest funktsioonist JavaScriptis:

function doIt() { console.log("Doing it");
}

See on lähtepunkt, millest liikuda Arrow-funktsioonide poole.

Samm 1: Arrow-funktsiooni deklareerimine

Selle asemel, et kasutada function-märksõna, saad lihtsalt panna parameetrid sulgudesse ja seejärel kasutada noolt, millele järgneb funktsioonikeha. Siin on, kuidas eelmine funktsioon välja näeb Arrow-funktsioonina:

const doIt = () => { console.log("Doing it");
};

Nagu näed, on süntaks palju kompaktsem. Pärast esimest katset saad kontrollida, kas funktsioon töötab korrektselt.

Samm 2: Arrow-funktsioonide kasutamine massiividega

Arrow-funktsioonide teine suur eelis avaldub nende kasutamisel massiividega. Võtame näite. Oletame, et sul on arvude massiiv ja soovid leida teatud arvu positsiooni. Siin kasutame findIndex meetodit indeksi leidmiseks:

const numbers = [2, 3, 4, 5];
const index = numbers.findIndex((element) => element === 3);
console.log(index);

Arrow-funktsioon muudab koodi loetavust oluliselt ja vähendab täiendava function-märksõna vajadust.

Samm 3: Arrow-funktsioonide lühendamine

Kui Arrow-funktsioonil on vaid üks avaldis, saad jätta ära looksulud ja return-märksõna. Siit näeb, kuidas me saame findIndex-funktsiooni veelgi lühendada:

const index = numbers.findIndex(element => element === 3);

See pole mitte ainult lühem, vaid ka elegantsem. Saad funktsiooni testida ja veenduda, et see töötab endiselt korrektselt.

Samm 4: this-märksõna käsitlemine

Arrow-funktsioonide tähtis eelis on this-konteksti käsitlemine. Klassikalistes funktsioonides muutub this sageli ettearvamatuks, eriti kui funktsiooni kasutatakse tagasikutsefunktsioonina. Arrow-funktsioonid aga seovad this selle kontekstiga, kus need on määratletud.

Vaatame järgmist näidet:

const obj = { text: "Text", print: function() { console.log(this.text); }
};

obj.print(); // Näitab "Teade"

Kui aga kasutad setTimeout'i tavalise funktsiooniga, muutub this konteksti:

setTimeout(function() { console.log(this.text);
}, 1000); // Näitab määratlemata väärtust

Kasutades Arrow-funktsiooni setTimeout'i sees, saad sama tulemuse klassikalise funktsiooni puhul, ilma konteksti kaotamata:

setTimeout(() => { console.log(this.text);
}, 1000); // Näitab "Teade"

Samm 5: this-märksõna määramise säilitamine

Sa saad samuti siduda this muutujaga, et tagada sellele juurdepääs. See muster on aga sageli vähem elegantne kui Arrow-funktsioonide kasutamine.

const ise = this;
setTimeout(function() { console.log(ise.text);
}, 1000);

Arrow-funktsioonide eelised

• Need on võrreldes tavalise funktsioonideklaratsiooniga lühemad ja elegantsed.
• Neil puudub oma this-kontekst, mis lihtsustab nende kasutamist tagasikutsumisfunktsioonides.
• Süntaks võimaldab sul koodi oluliselt loetavamaks muuta.

Kokkuvõte

Arrow-funktsioonid pakuvad praktilist võimalust deklareerida JavaScripti funktsioone tõhusalt. Uue süntaksiga paraneb mitte ainult loetavus, vaid ka this-konteksti käsitlemine märgatavalt lihtsustub. Arrow-funktsioone peaksid eelkõige kasutama juhul, kui vajad tagasikutsumisfunktsioone või lühemaid funktsioonide väljendusi.