Funkcia je opakovane použiteľná časť kódu, ktorá sa spustí, keď ju vyvoláte. Funkcie vám umožňujú opätovne použiť kód, vďaka čomu je modulárnejší a ľahšie sa udržiava.
Existuje niekoľko spôsobov, ako vytvoriť funkcie v JavaScripte. Tu sa naučíte rôzne spôsoby vytvárania funkcií a ako ich používať.
Deklarácie funkcií: Priama cesta
Jedným zo spôsobov, ako vytvoriť funkcie v JavaScripte, sú deklarácie funkcií. Deklarácia funkcie je funkcia v jazyku JavaScript, ktorá sa riadi syntaxou uvedenou nižšie.
funkciufunctionName(parametre) {
// kód ide sem...
vrátiť"Toto je deklarácia funkcie";
}
Komponenty vyššie uvedeného bloku kódu zahŕňajú:
- The funkciu kľúčové slovo: Toto kľúčové slovo deklaruje funkciu.
- functionName: Toto je názov funkcie. V praxi by mal byť čo najvýstižnejší a najzmysluplnejší a mal by naznačovať, čo funkcia robí.
- parametre: Predstavuje parametre funkcie. Parametre sú voliteľný zoznam premenných, ktoré môžete odovzdať funkcii, keď ju voláte.
- Telo funkcie: Obsahuje kód, ktorý funkcia spustí, keď ju zavoláte. Je obklopený kučeravými zátvorkami {} a môže obsahovať akýkoľvek platný kód JavaScript.
- The vrátiť príkaz: Tento príkaz zastaví vykonávanie funkcie a vráti zadanú hodnotu. Vo vyššie uvedenom prípade by volanie funkcie vrátilo reťazec „Toto je deklarácia funkcie“.
Napríklad nižšie uvedená deklarácia funkcie berie tri čísla ako parametre a vracia ich súčet.
funkciupridaťTriČísla(a, b, c) {
vrátiť a + b + c;
}
Ak chcete zavolať deklaráciu funkcie v JavaScripte, napíšte názov funkcie, za ktorým nasleduje množina zátvoriek (). Ak má funkcia nejaké parametre, odovzdajte ich ako argumenty v zátvorkách.
Napríklad:
pridaťTriČísla(1, 2, 3) // 6
Vyššie uvedený blok kódu volá pridaťTriČíslo funkcie a odovzdá 1, 2 a 3 ako argumenty funkcii. Ak spustíte tento kód, vráti hodnotu 6.
JavaScript výťahy deklarácie funkcií, čo znamená, že ich môžete zavolať skôr, ako ich zadefinujete.
Napríklad:
isHoisted(); // Funkcia je zdvihnutá
funkciuisHoisted() {
konzoly.log("Funkcia je zdvihnutá");
vrátiťpravda;
}
Ako je znázornené v bloku kódu vyššie, volanie isHoisted pred definovaním by to nevyvolalo chybu.
Funkčné výrazy: Funkcie ako hodnoty
V JavaScripte môžete definovať funkciu ako výraz. Potom môžete priradiť hodnotu funkcie premennej alebo ju použiť ako argument pre inú funkciu.
Sú tiež známe ako anonymné funkcie, pretože nemajú žiadne mená a môžete ich volať iba z premennej, ku ktorej ste ich priradili.
Nižšie je uvedená syntax výrazu funkcie:
konšt functionName = funkciu () {
vrátiť"Výraz funkcie";
};
Ak chcete volať výraz funkcie v JavaScripte, napíšte názov premennej, ktorý ste funkcii priradili, a za ním množinu zátvoriek (). Ak má funkcia nejaké parametre, odovzdajte ich ako argumenty v zátvorkách.
Napríklad:
functionName(); // Výraz funkcie
Funkčné výrazy sú užitočné pri vytváraní funkcií, ktoré sa spúšťajú v iných funkciách. Medzi typické príklady patria obslužné programy udalostí a ich spätné volania.
Napríklad:
button.addEventListener("klik", funkciu (udalosť) {
konzoly.log("Klikli ste na tlačidlo!");
});
Vo vyššie uvedenom príklade bol použitý funkčný výraz, ktorý má an udalosť argument ako spätné volanie k addEventListener funkciu. Keď použijete výraz funkcie ako spätné volanie, funkciu nemusíte explicitne volať. Automaticky ho zavolá jeho nadradená funkcia.
Vo vyššie uvedenom prípade, keď poslucháč udalosti dostane a kliknite udalosť, zavolá funkciu spätného volania a odošle udalosť objekt ako argument.
Na rozdiel od deklarácií funkcií nie sú výrazy funkcií zdvihnuté, takže ich nemôžete volať skôr, ako ich definujete. Pokus o prístup k funkčnému výrazu pred jeho definovaním bude mať za následok a ReferenceError.
Napríklad:
isHoisted(); // ReferenceError: Nemožno získať prístup k 'isHoisted' pred inicializáciou
konšt isHoisted = funkciu () {
konzoly.log("Funkcia je zdvihnutá");
};
Funkcie šípok: Kompaktné a obmedzené
ES6 predstavil skratku na písanie anonymných funkcií v JavaScripte nazývanú šípkové funkcie. Majú stručnú syntax, vďaka ktorej je váš kód čitateľnejší, najmä pri práci s krátkymi jednoriadkovými funkciami.
Na rozdiel od iných metód vytvárania funkcií, funkcie šípok nevyžadujú funkciu kľúčové slovo. Výraz funkcie šípky pozostáva z troch častí:
- Pár zátvoriek (()), ktorý obsahuje parametre. Ak má funkcia iba jeden parameter, zátvorky môžete vynechať.
- Šíp (=>), ktorý pozostáva zo znamienka rovnosti (=) a znamienko väčšie ako (>).
- Pár zložených zátvoriek obsahujúcich telo funkcie. Ak funkcia pozostáva z jedného výrazu, zložené zátvorky môžete vynechať.
Napríklad:
// Jediný parameter, implicitný návrat
konšt functionName = parameter =>konzoly.log("Funkcia šípky s jedným parametrom")
// Viac parametrov, explicitný návrat
konšt functionName = (parameter_1, parameter_2) => {
vrátiť"Funkcia šípky viacerých parametrov"
};
Keď vynecháte zložené zátvorky, funkcia šípky implicitne vráti jeden výraz, takže nie je potrebné vrátiť kľúčové slovo. Na druhej strane, ak nevynecháte zložené zátvorky, musíte explicitne vrátiť hodnotu pomocou vrátiť kľúčové slovo.
Funkcie šípok majú tiež odlišné toto väzba v porovnaní s bežnými funkciami. V bežných funkciách je hodnota toto závisí od toho, ako funkciu voláte. Vo funkcii šípky, toto je vždy viazaný na toto hodnotu okolitého rozsahu.
Napríklad:
konšt foo = {
názov: "Dave",
pozdraviť: funkciu () {
setTimeout(() => {
konzoly.log('Dobrý deň, volám sa ${toto.názov}`);
}, 1000);
},
};
foo.greet(); // Záznamy "Ahoj, volám sa Dave" po 1 sekunde
Vo vyššie uvedenom príklade šípka funguje vo vnútri pozdraviť metóda má prístup toto.meno, aj keď setTimeout funkcia to volá. Normálna funkcia by mala svoje toto viazané na globálny objekt.
Ako už názov napovedá, okamžite vyvolaná funkcia (IIFE) je funkcia, ktorá sa spustí hneď, ako je definovaná.
Tu je štruktúra IIFE:
(funkciu () {
// kód tu
})();(() => {
// kód tu
})();
(funkciu (param_1, param_2) {
konzoly.log (param_1 * param_2);
})(2, 3);
IIFE pozostáva z funkčného výrazu zabaleného do páru zátvoriek. Nasledujte ho s párom zátvoriek mimo krytu na vyvolanie funkcie.
IIFE môžete použiť na vytváranie rozsahov, skrytie podrobností implementácie a zdieľanie údajov medzi viacerými skriptami. Kedysi sa používali ako a modulový systém v JavaScripte.
Vytváranie funkcie mnohými rôznymi spôsobmi
Pochopenie toho, ako vytvárať funkcie v JavaScripte, je kľúčové. To platí pre základnú funkciu, ktorá vykonáva jednoduchý výpočet, alebo sofistikovanú funkciu, ktorá interaguje s ostatnými časťami vášho kódu.
Vyššie uvedené techniky môžete použiť na vytváranie funkcií v JavaScripte a štruktúrovanie a organizovanie kódu. Vyberte si prístup, ktorý najlepšie vyhovuje vašim požiadavkám, pretože každý má rôzne výhody a aplikácie.
