Milloin käyttää funktion ilmoitusta funktion lausekkeeseen nähden

Tech Jargon -sarja

Todennäköisesti osaat jo kirjoittaa toimintoja molemmilla tavoilla. function doStuff() {}ja () =>{} ovat merkkejä, jotka kirjoitamme koko päivän. Mutta miten ne eroavat toisistaan ​​ja miksi käyttää toisiaan?

Huomaa: Esimerkkejä annetaan JavaScript-muodossa. Y meidän M ileage M ay V kuuta muihin kieliin.

Ensimmäinen ero: nimi

Kun luot funktion, jolla on nimi , se on funktion ilmoitus . Nimi voidaan jättää pois funktiolausekkeista , jolloin funktio on "nimetön".

Toimintoilmoitus:

function doStuff() {};

Funktion lauseke:

const doStuff = function() {}

ES6-syntaksissa käytetään usein nimettömiä toimintoja, kuten:

const doStuff = () => {}

Nosto

Nostaminen tarkoittaa toimintojen ja muuttujien saatavuutta koodisi yläosassa, toisin kuin vasta niiden luomisen jälkeen. Objektit alustetaan kääntöhetkellä ja ovat käytettävissä missä tahansa tiedostossa.

Toimintoilmoitukset nostetaan, mutta funktiolausekkeet eivät.

Se on helppo ymmärtää esimerkillä:

doStuff();
function doStuff() {};

Edellä mainittu ei heitä virhettä, mutta tämä:

doStuff();
const doStuff = () => {};

Funktiolausekkeiden tapaus

Saattaa tuntua siltä, ​​että toimintoilmoitukset, joilla on voimakkaat nosto-ominaisuudet, reunustavat funktion ilmaisuja hyödyllisyyden suhteen. Mutta toisen valitseminen edellyttää ajattelua milloin ja missä toimintoa tarvitaan . Pohjimmiltaan kenen on tiedettävä siitä?

Funktiolausekkeisiin vedotaan maailmanlaajuisen saastumisen välttämiseksi . Sen sijaan, että ohjelmasi olisi tietoinen monista eri toiminnoista, kun pidät ne nimettöminä, ne käytetään ja unohdetaan välittömästi.

IIFE

Nimi - välittömästi kutsutut funktiolausekkeet - kertoo kaiken täällä. Kun funktio luodaan samanaikaisesti, kun sitä kutsutaan, voit käyttää IIFE: tä, joka näyttää tältä:

(function() => {})()

tai:

(() => {})()

Katso kattava artikkeli IIFE: stä.

Soittopyynnöt

Toiseen funktioon siirrettyä toimintoa kutsutaan usein "takaisinsoittoksi" JavaScriptissä. Tässä on esimerkki:

function mapAction(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

Ongelmana on, että mapActionse on koko sovelluksesi käytettävissä - sitä ei tarvita. Jos tämä takaisinsoitto on funktion lauseke, se ei ole käytettävissä sitä käyttävän funktion ulkopuolella:

array.map(item => { //do stuff to an item })

tai

const mapAction = function(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

vaikka mapActionse on koodattavissa sen alustuksen alapuolella .

Yhteenveto

Lyhyesti sanottuna, käytä toimintoilmoituksia, kun haluat luoda toiminnon maailmanlaajuisesti ja asettaa sen saataville koko koodissasi. Käytä funktiolausekkeita rajoittaaksesi toiminnon saatavuutta, pitämällä globaalin ulottuvuuden valossa ja pitämällä puhdas syntaksin.

Viitteet

  • Toimintoilmoitus, MDN-asiakirjat.
  • Funktion lauseke, MDN-asiakirjat.
  • Nosto, MDN-sanasto.

Tech Jargon -sarja

Tech-tapaamisissa ja konferensseissa heitetään niin monia lauseita, olettaen, että kaikki ovat jo lingoilla. En useinkaan ole alas kielen kanssa. Kehittäjien on tavallista toimia hämmästyneenä siitä, että minulta puuttuu osa tietoa.

Totuus on, en usein vain tiedä oikeaa sanaa sille. Ihmisinä, mutta varsinkin kehittäjinä, rakastamme erottaa ne, jotka eivät “puhu puhetta”, joten tässä sarjassa pyritään saamaan vankka käsitys ohjelmoinnin käsitteistä, jotka “pitäisi tietää”.

Tämä on sarjan toinen artikkeli. Ensimmäinen oli korkeamman tason toimintoja. Varo enemmän käydessäni tapaamisissa ja konferensseissa ja teeskentellen tietäväni, mistä teknikkokaverini puhuvat, mutta minun on sitten mentävä kotiin ja googlattava se.