Nuolifunktiot JavaScriptissä - Tehokas käyttö

Toiminnot ovat JavaScriptin sydän. Aiemmin ne olivat sidoksissa function-avainsanan käyttöön, mutta ES6 tuo uuden ja elegantimman kirjoitustavan niin kutsutuilla nuolitoiminnoilla. Tämä uusi syntaksi tekee koodistasi paitsi lyhyemmän, myös ratkaisee joitakin ongelmia, jotka liittyvät this-kontekstiin. Tässä oppaassa opit kaiken mitä sinun tarvitsee tietää nuolitoiminnoista.

Tärkeimmät havainnot

• Nuolitoiminnot tarjoavat lyhyemmän syntaksin verrattuna perinteisiin toimintoihin.
• Ne eivät omaa omaa this-kontekstia, mikä tekee niistä erityisen käteviä käytettäessä takaisinkutsutoiminnoissa.
• Aaltosulkeiden ja return-lauseen poistaminen on mahdollista, kun toiminto palauttaa vain yhden lauseen.

Johdanto nuolitoimintoihin

Nuolitoimintoja käytetään yleisesti koodin tekemiseen helpommin luettavaksi ja tiiviimmäksi. Sen sijaan että kirjoittaisit function, voit käyttää uutta syntaksia toiminnon lyhyemmäksi määrittämiseksi.

Jotta ymmärtäisit mitä nuolitoiminnot ovat, perinteisistä toiminnoista voi hyvin aloittaa. Kun määrität toiminnon function-avainsanalla, se on yleensä vähän pidempi ja vähemmän elegantti. Tässä on esimerkki standarditoiminnosta JavaScriptissä:

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

Tämä on lähtökohta, josta siirrymme nuolitoimintoihin.

Vaihe 1: Nuolitoiminnon määrittäminen

Sen sijasta, että käyttäisit function-avainsanaa, voit yksinkertaisesti asettaa parametrit sulkuihin ja sen jälkeen käyttää nuolta, jota seuraa toiminnon runko. Tässä on, miltä edellinen toiminto näyttää nuolitoimintona:

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

Kuten näet, syntaksi on paljon tiiviimpi. Ensimmäisen kokeilun jälkeen voit tarkistaa, toimiiko toiminto oikein.

Vaihe 2: Nuolitoimintojen käyttö taulukoiden kanssa

Toinen suuri etu nuolitoiminnoissa näkyy niiden käytössä taulukoiden kanssa. Otetaan esimerkki. Oletetaan, että sinulla on taulukko numeroita ja haluat löytää tietyn numeron sijainnin. Tässä käytämme findIndex-metodia indeksin löytämiseksi:

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

Nuolitoiminto tekee koodin luettavuuden paljon paremmaksi ja vähentää tarvetta ylimääräiselle function-avainsanalle.

Vaihe 3: Nuolitoimintojen lyhentäminen

Kun nuolitoiminnolla on vain yksi lauseke, voit jättää aaltosulkeet ja return-avainsanan pois. Näin näyttää, kun lyhennämme findIndex-toimintoa edelleen:

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

Tämä ei ole vain lyhyempi vaan myös tyylikkäämpi. Voit testata toimintoa ja varmistua, että se toimii edelleen oikein.

Vaihe 4: this-avainsanan käsittely

Yksi nuolitoimintojen suurimmista eduista on this-kontekstin käsittely. Perinteisissä funktioissa this saattaa usein olla arvaamaton, erityisesti kun funktiota käytetään takaisinkutsuna. Nuolitoiminnot sen sijaan sitovat thisin siihen kontekstiin, jossa ne on määritelty.

Katso seuraava esimerkki:

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

obj.print(); // Tulostaa "Teksti"

Kun kuitenkin käytät setTimeoutia perinteisen funktion kanssa, this-konteksti muuttuu:

setTimeout(function() { console.log(this.text);
}, 1000); // Tulostaa undefined

Käyttämällä nuolitoimintoa setTimeoutin sisällä saat saman tuloksen kuin perinteisellä funktiolla, ilman että menetät kontekstin:

setTimeout(() => { console.log(this.text);
}, 1000); // Tulostaa "Teksti"

Vaihe 5: thisin liittäminen muuttujaan

Voit myös sitoa thisin muuttujaan varmistaaksesi että pääset siihen käsiksi. Tämä kaava on kuitenkin usein vähemmän elegantti kuin nuolitoimintojen käyttö.

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

Arrow-funktioiden edut

• Ne ovat lyhyempiä ja tyylikkäämpiä verrattuna perinteiseen funktiomäärittelyyn.
• Ne eivät omista this-kontekstia, mikä yksinkertaistaa niiden käyttöä takaisinkutsufunktioissa.
• Syntaksi mahdollistaa koodin huomattavasti selkeämmän tekemisen.

Yhteenveto

Arrow-funktiot tarjoavat kätevän tavan julistaa JavaScript-funktioita tehokkaasti. Uuden syntaksin avulla ei paranneta vain luettavuutta, vaan myös this-kontekstin käsittelyä helpotetaan merkittävästi. Sinun tulisi käyttää arrow-funktioita erityisesti silloin, kun tarvitset takaisinkutsufunktioita tai lyhyempiä funktiolausekkeita.