Tech Jargon sorozat
Valószínűleg már tudja, hogyan írjon függvényeket mindkét módon. function doStuff() {}és () =>{} olyan karakterek, amelyeket egész nap beírunk. De miben különböznek egymástól, és miért kell használni őket?
Megjegyzés: A példák JavaScript-ben vannak megadva. Y a M ileage M ay V ed rendű más nyelven.
Az első különbség: név
Ha egy függvényt létrehoz egy névvel , ez egy függvény deklaráció . A név elhagyható a funkciókifejezésekben , így a függvény „névtelen”.
Funkciónyilatkozat:
function doStuff() {};Funkció kifejezés:
const doStuff = function() {}Gyakran látunk névtelen függvényeket, amelyeket az ES6 szintaxissal használnak, így:
const doStuff = () => {}Emelés
Az emelés a függvények és változók rendelkezésre állására utal a kódod „tetején”, szemben csak azok létrehozása után. Az objektumokat fordításkor inicializálják, és a fájlban bárhol elérhetők.
A funkció deklarációk fel vannak emelve, de a funkciók kifejezései nem.
Könnyű megérteni egy példával:
doStuff();function doStuff() {};A fentiek nem dobnak hibát, de ez:
doStuff();const doStuff = () => {};A függvénykifejezések esete
Úgy tűnhet, hogy a funkciódeklarációk - erőteljes emelő tulajdonságaikkal - kihasználják a funkciók kifejezését. De ha egyiket választja a másik helyett, el kell gondolkodnia azon, hogy mikor és hol szükséges a funkció . Alapvetően kinek kell tudnia erről?
A globális hatókör szennyezésének elkerülése érdekében a funkciókifejezésekre hivatkozunk . Ahelyett, hogy programja sokféle funkcióval lenne tisztában, anonim néven tartva azokat azonnal felhasználja és elfelejti.
IIFE
A név - azonnal hivatkozott függvény-kifejezésekre - nagyjából itt mindent elmond. Ha egy függvény egyidejűleg létrehozásra kerül, akkor hívhat egy IIFE-t, amely így néz ki:
(function() => {})()vagy:
(() => {})()Az IIFE-k részletes áttekintéséhez olvassa el ezt az átfogó cikket.
Visszahívások
Egy másik függvénynek átadott függvényt gyakran hívnak visszahívásnak a JavaScript-ben. Íme egy példa:
function mapAction(item) { // do stuff to an item } array.map(mapAction)array.map(mapAction)A probléma az, mapActionhogy a teljes alkalmazás számára elérhető lesz - erre nincs szükség. Ha ez a visszahívás egy funkciókifejezés, akkor nem lesz elérhető az azt használó függvényen kívül:
array.map(item => { //do stuff to an item })vagy
const mapAction = function(item) { // do stuff to an item } array.map(mapAction)array.map(mapAction)bár az inicializálása alattmapAction kódolható lesz .
Összegzés
Röviden, akkor használja a függvénydeklarációkat, ha egy függvényt a globális hatókörön szeretne létrehozni, és elérhetővé tenné az egész kódjában. A funkciókifejezések használatával korlátozhatja a funkció elérhetőségét, világossá tegye a globális hatókörét és fenntartsa a tiszta szintaxist.
Hivatkozások
- Funkció deklaráció, MDN dokumentumok.
- Funkció kifejezés, MDN dokumentumok.
- Emelés, MDN szószedet.
A Tech Jargon sorozat
Olyan sok mondat merül fel a technikai találkozókon és konferenciákon, feltételezve, hogy már mindenki le van tiltva a szóhasználattal. Gyakran nem vagyok rosszul a nyelven. Gyakran előfordul, hogy a fejlesztők elképedve cselekszenek, hogy hiányzik egy kis tudásom.
Az az igazság, hogy gyakran csak nem tudom a megfelelő szót rá. Emberként, de különösen fejlesztő emberként szeretjük elbocsátani azokat, akik nem „beszélik a beszélgetést”, ezért ez a sorozat arról szól, hogy alaposan megértsük azokat a programozási fogalmakat, amelyeket az embernek „ismernie kell”.
Ez a sorozat második cikke. Az első a magasabb rendű funkciók voltak. Vigyázzon többet, amikor találkozókra és konferenciákra járok, és úgy teszek, mintha tudnám, miről beszélnek technikus társaim, de aztán haza kell mennem, és guglizni.