Funkciók létrehozása JavaScriptben

A függvény egy újrafelhasználható kódrészlet, amely akkor fut le, amikor meghívja. A funkciók lehetővé teszik a kód újrafelhasználását, így modulárisabbá és könnyebben karbantarthatóvá válik.

Számos módja van a függvények létrehozásának JavaScriptben. Itt megismerheti a funkciók létrehozásának különböző módjait és azok használatát.

Funkciónyilatkozatok: Az egyenes út

Függvények létrehozásának egyik módja a JavaScriptben a függvénydeklarációk. A függvénydeklaráció egy JavaScript függvény, amely az alábbi szintaxist követi.

funkciófunctionName(paramétereket) {
// a kód ide megy...
Visszatérés"Ez egy függvény deklaráció";
}

A fenti kódblokk összetevői a következők:

• A funkció kulcsszó: Ez a kulcsszó deklarál egy függvényt.
• functionName: Ez a függvény neve. A gyakorlatban a lehető legleíróbbnak és értelmesebbnek kell lennie, jelezve, hogy a funkció mit csinál.
instagram viewer
• paramétereket: Ez a funkció paramétereit jelöli. A paraméterek olyan változók opcionális listája, amelyeket átadhat egy függvénynek, amikor meghívja azt.
• A függvény törzse: Ez tartalmazza azt a kódot, amelyet a függvény a meghívásakor futtat. Göndör fogszabályzó veszi körül {} és bármilyen érvényes JavaScript kódot tartalmazhat.
• A Visszatérés utasítás: Ez az utasítás leállítja a függvény végrehajtását, és visszaadja a megadott értéket. A fenti esetben a függvény meghívása a „Ez egy függvénydeklaráció” karakterláncot adná vissza.

Például az alábbi függvénydeklaráció három számot vesz fel paraméterként, és ezek összegét adja vissza.

funkcióaddThreeNumbers(a, b, c) {
Visszatérés a + b + c;
}

Funkciódeklaráció JavaScriptben való meghívásához írja be a függvény nevét, majd egy zárójelet (). Ha a függvény bármilyen paramétert felvesz, adja át azokat argumentumként a zárójelben.

Például:

addThreeNumbers(1, 2, 3) // 6

A fenti kódblokk a addThreeNumber függvényeket, és átadja az 1-et, a 2-t és a 3-at argumentumként a függvénynek. Ha ezt a kódot futtatja, akkor a 6-os értéket adja vissza.

JavaScript emelők függvénydeklarációkat, vagyis meghívhatja őket, mielőtt meghatározná őket.

Például:

isHoisted(); // A funkció fel van emelve
funkcióisHoisted() {
konzol.log("A funkció fel van emelve");
Visszatérésigaz;
}

Ahogy a fenti kódblokkban látható, hívás isHoisted definiálása előtt nem okozna hibát.

Függvénykifejezések: Funkciók értékként

A JavaScriptben egy függvényt kifejezésként definiálhat. Ezután hozzárendelheti a függvény értékét egy változóhoz, vagy használhatja argumentumként egy másik függvényhez.

Névtelen függvényeknek is nevezik őket, mivel nincs nevük, és csak abból a változóból hívhatja meg őket, amelyhez hozzárendelte őket.

Az alábbiakban egy függvénykifejezés szintaxisa látható:

const functionName = funkció () {
Visszatérés"Funkció kifejezés";
};

Függvénykifejezés JavaScriptben való meghívásához írja be a függvényhez rendelt változónevet, majd zárójeleket (). Ha a függvény bármilyen paramétert felvesz, adja át azokat argumentumként a zárójelben.

Például:

functionName(); // Függvénykifejezés

A függvénykifejezések hasznosak olyan függvények létrehozásakor, amelyek más függvényekben futnak. Tipikus példák az eseménykezelők és azok visszahívásai.

Például:

button.addEventListener("kattintás", funkció (esemény) {
konzol.log(– Megnyomott egy gombot!);
});

A fenti példa egy függvénykifejezést használt, amely egy esemény érv, mint visszahívás a addEventListener funkció. Nem kell kifejezetten meghívnia a függvényt, ha függvénykifejezést használ visszahívásként. A szülő függvény automatikusan meghívja.

A fenti esetben, amikor az eseményfigyelő megkapja a kattintson esemény esetén meghívja a visszahívási függvényt, és átadja a esemény tárgyat érvként.

A függvénydeklarációkkal ellentétben a függvénykifejezéseket nem emelik ki, így nem hívhatja meg őket, mielőtt meghatározná őket. Ha megpróbál hozzáférni egy függvénykifejezéshez, mielőtt meghatározná azt, az a ReferenceError.

Például:

isHoisted(); // ReferenceError: Az „isHoisted” nem érhető el inicializálás előtt
const isHoisted = funkció () {
konzol.log("A funkció fel van emelve");
};

Nyíl funkciók: kompakt és korlátozott

Az ES6 bevezetett egy gyorsírást a névtelen függvények JavaScriptben történő írásához, amelyeket nyílfüggvényeknek neveznek. Tömör szintaxisuk van, amely olvashatóbbá teheti a kódot, különösen, ha rövid, egysoros függvényekkel foglalkozik.

A függvények létrehozásának más módszereivel ellentétben a nyílfüggvényekhez nincs szükség a funkció kulcsszó. A nyílfüggvény kifejezés három részből áll:

• egy pár zárójel (()) tartalmazza a paramétereket. A zárójeleket elhagyhatja, ha a függvénynek csak egy paramétere van.
• Egy nyíl (=>), amely egyenlőségjelből áll (=) és nagyobb mint jel (>).
• A funkciótestet tartalmazó göndör fogszabályozó pár. A kapcsos zárójeleket elhagyhatja, ha a függvény egyetlen kifejezésből áll.

Például:

// Egyparaméteres, implicit visszatérés
const functionName = paraméter =>konzol.log("Egyparaméteres nyíl funkció")
// Több paraméter, explicit visszatérés
const functionName = (paraméter_1, paraméter_2) => {
Visszatérés"Többparaméteres nyíl funkció"
};

Ha elhagyja a kapcsos zárójeleket, a nyíl függvény implicit módon az egyetlen kifejezést adja vissza, így nincs szükség a Visszatérés kulcsszó. Másrészt, ha nem hagyja ki a kapcsos zárójeleket, akkor kifejezetten vissza kell adnia egy értéket a Visszatérés kulcsszó.

A nyílfüggvények is eltérőek ez kötelező a normál funkciókhoz képest. Szabályos függvényekben az értéke ez attól függ, hogyan hívod a függvényt. Nyíl függvényben, ez mindig kötődik a ez a környező hatótáv értéke.

Például:

const foo = {
 név: "Dave",
 üdvözöl: funkció () {
 setTimeout(() => {
konzol.log(`Hello, a nevem ${ez.név}`);
 }, 1000);
 },
};
foo.greet(); // A "Hello, my name is Dave" 1 másodperc után naplózza

A fenti példában a nyíl függvény a üdvözöl módszernek van hozzáférése ez a név, annak ellenére, hogy a setTimeout függvény hívja meg. Egy normál funkciónak megvan a maga ez a globális objektumhoz kötve.

Ahogy a neve is sugallja, az azonnal meghívott függvény (IIFE) olyan függvény, amely a definiálás után azonnal lefut.

Íme az IIFE felépítése:

(funkció () {
// kód itt
})();
(() => {
// kód itt
})();
(funkció (param_1, param_2) {
konzol.log (param_1 * param_2);
})(2, 3);

Az IIFE egy függvénykifejezésből áll, amely zárójelpárba van csomagolva. Kövesse ezt egy pár zárójellel a burkolaton kívül a funkció meghívásához.

Az IIFE-k segítségével hatóköröket hozhat létre, elrejtheti a megvalósítás részleteit, és megoszthat adatokat több parancsfájl között. Egykor használták a modulrendszer JavaScriptben.

Funkció létrehozása sokféle módon

Kulcsfontosságú, hogy megértsük, hogyan lehet függvényeket létrehozni JavaScriptben. Ez igaz egy egyszerű számítást végrehajtó alapfunkcióra vagy egy olyan kifinomult függvényre, amely kölcsönhatásba lép a kód más részeivel.

A fent tárgyalt technikákat használhatja JavaScript-funkciók létrehozására, valamint a kód felépítésére és rendszerezésére. Válassza ki az igényeinek leginkább megfelelő megközelítést, mivel mindegyiknek különböző előnyei és alkalmazásai vannak.