Robert Whitney
Funkcie JavaScript – obsah:
Doteraz sme videli pomerne významné aspekty JavaScriptu spolu s niektorými z najbežnejších najlepších praktík kódovania, ktorými by sme sa mali riadiť. Tieto tzv. praktiky sú tu z nejakého dôvodu a keď ich používame, ušetria nám veľa chýb a frustrácie, ktorým by sme inak čelili. Jednou z najlepších praktík, ktoré sme videli, bolo dodržiavať princíp DRY, ktorý v podstate hovorí: Nepokračuj v opakovaní seba samého. Jedným zo spôsobov, ako sme tento princíp aplikovali, bolo použitie cyklov v našom programe, konkrétne “for cyklov”, ktoré nám ušetrili veľa času a kódu. V tejto lekcii uvidíme ďalší významný stavebný blok v programovaní, a to sú “funkcie”.
Typy funkcií JavaScript
Funkcie sú v programovaní mimoriadne bežné, a to platí aj pre JavaScript. V skutočnosti sú tak bežné, že niektoré JavaScriptové rámce, ako napríklad React, boli postavené na využívaní funkcií JavaScriptu ako základného stavebného bloku pre vytváranie front-endu webových stránok. A to robili z dobrého dôvodu. Funkcie JavaScriptu poskytujú vysokú flexibilitu, pričom poskytujú vysoko predvídateľný a modulárny kód. A to vedie k oveľa jasnejšiemu kódu s menej opakovaniami a oveľa menej chybami. Jednou z prvých vecí, ktoré by ste mali vedieť o funkciách, je, že existujú dva hlavné typy funkcií. Tými sú “čisté funkcie” a “nečisté funkcie”. Všeobecne povedané, budeme chcieť používať čisté funkcie, kde môžeme, čo najviac. Čisté funkcie poskytujú viacero výhod, ktoré ich robia oveľa jednoduchšími na prácu v porovnaní s nečistými funkciami. Pozrime sa najprv na čisté funkcie JavaScriptu a potom sa ponoríme aj do nečistých funkcií.
Čisté funkcie v JavaScripte
Čisté funkcie sú v podstate funkcie, ktoré dodržiavajú určité pravidlá. A pretože dodržiavajú tieto pravidlá, sú vysoko predvídateľné, ľahšie sa ladia v rozsiahlejšom systéme, modulárne spolu s niektorými ďalšími výhodami.
Čistá funkcia prijíma nejaký vstup a vracia nejaký výstup. Nezmení vstupy priamo ani neinteraguje s prostredím iným spôsobom. To znamená, že neposiela vám upozornenia, nedáva vám vyhlásenie, zatiaľ čo robí niečo iné, alebo neinteraguje so svojím prostredím iným spôsobom.
Týmto spôsobom, keď pracujete s čistou funkciou, viete, že bez ohľadu na to, kde spúšťate svoj kód alebo kedy spúšťate svoj kód, pokiaľ poskytnete rovnaké vstupy, dostanete rovnaké výstupy. Pozrime sa na to s niektorými príkladmi.
// zdvojnásobiť počiatočné číslo
function double(num){
return num * 2;
}
// ztrojnásobiť počiatočné číslo
function triple(num){
return num * 3;
}
// pridať 100 k počiatočnému číslu
function add100(num){
return num + 100;
}
// pridať dve čísla
function addTwoNums(num1, num2){
const sum = num1 + num2;
return sum;
}
// vynásobiť dve čísla
function multiplyTwoNums(num1, num2){
const total = num1 * num2;
return total;
}
Všetky vyššie uvedené funkcie JavaScriptu sú čisté funkcie. Pri bližšom pohľade ste si možno všimli vzor, ktorý používame pri vytváraní čistých funkcií. Prvým krokom je, že napíšeme kľúčové slovo “function”, aby sme povedali JavaScriptu, že chceme definovať funkciu.
Ďalej dáme funkcii názov, ideálne by mal byť tento názov krátky, ale dostatočne popisný, aby niekto, kto príde, pochopil, čo funkcia robí. Napríklad, ak pridávame 100 k číslu, môžeme funkciu nazvať “add100”, ak zdvojujeme číslo, môžeme funkciu nazvať “double” a tak ďalej.
Akonáhle sme funkciu správne pomenovali, ďalším krokom je poskytnúť jej nejaké vstupy. Poskytujeme vstupy v zátvorkách a ak máme viacero vstupov, oddeľujeme ich čiarkou. Presne tak, ako sme to urobili pri funkcii “multiplyTwoNums”. (Taktiež, ako poznámka, čísla sa v programovaní bežne označujú ako “nums” pre skratku, takže ak pri pomenovaní funkcie môžeme využiť túto bežnú znalosť na to, aby sme mali krátke, ale popisné názvy funkcií.)
Vstupy, ktoré poskytujeme funkcii, sa tiež bežne označujú ako “parametre”, keď vytvárame funkcie JavaScriptu, rozhodujeme, koľko parametrov bude funkcia mať. Keď sa rozhodneme použiť funkciu, poskytneme týmto parametrom “hodnoty”. Tieto hodnoty, ktoré poskytujeme pri používaní funkcie, sa tiež bežne označujú ako “argumenty”. Takže keď poskytujeme vstup pre funkciu, tento proces sa tiež označuje ako “predávanie argumentov” funkcii. Pozrime sa na niektoré príklady toho.
// najprv definujme funkciu, ktorá prijíma číslo
// a vynásobí ho 10
function multiplyBy10(num1){
return num1 * 10;
}
// teraz zavolajme túto funkciu // uložme výsledok do konštanty // a zobrazme výsledky const bigNum = multiplyBy10(3); alert(bigNum); // num1 je tu parameter. // hodnotu 3 sme ako argument odovzdali funkcii. // výsledky funkcie sme uložili // do konštanty s názvom bigNum. // zobrazili sme konštantu s názvom bigNum používateľovi.
Ako ste videli v uvedenom kóde, aj keď chceme niečo zobraziť používateľovi, udržujeme funkciu oddelenú od funkcie alert. Ak by sme chceli zobraziť výsledky používateľovi vo vnútri funkcie, to by si vyžadovalo, aby funkcia interagovala s inými časťami počítača a urobilo by to našu funkciu nečistou. Takže vo všeobecnosti chceme používať funkcie na to, aby sme im poskytli vstup a očakávali vrátenú hodnotu. Keď dostaneme túto vrátenú hodnotu, môžeme ju skutočne zobraziť alebo vykonať ďalšie funkcie JavaScriptu s ňou v závislosti od našich potrieb, ale pointa je, že udržiavame obavy o zobrazovanie výsledkov a výpočty výsledkov oddelene.
Takže doteraz sme videli, že môžeme použiť kľúčové slovo “function” na začatie deklarovania funkcie, potom funkciu primerane pomenovať, potom otvoríme a zatvoríme zátvorky a povieme funkcii, aké parametre bude potrebovať, potom otvoríme zložené zátvorky a povieme funkcii, čo chceme, aby robila, a keď dospejeme k výsledku, vrátime ten výsledok pomocou kľúčového slova “return”. A potom zatvoríme zložené zátvorky. Všetky tieto kroky boli potrebné na definovanie čistej funkcie. Teraz, keď máme funkciu, môžeme funkciu použiť v iných častiach nášho programu. Používanie funkcie sa bežne označuje ako “volanie funkcie”.
Volanie funkcie je oveľa jednoduchšie ako deklarovanie funkcie. Na volanie funkcie môžeme použiť jej názov, otvoriť zátvorky, poskytnúť jej nejaké argumenty a zatvoriť zátvorky. Keď to urobíme, funkcia nám vráti hodnotu, ktorú sme definovali. V závislosti od toho, čo chceme vykonať s touto vrátenou hodnotou, môžeme ju priradiť k premennej alebo konštante, môžeme s ňou vykonať ešte viac výpočtov, môžeme ju poslať na iné počítače alebo môžeme priamo zobraziť výsledky. Pozrime sa na niektoré príklady toho.
// začnime s funkciou, ktorá prijíma dva argumenty
// vynásobí ich a vráti výsledok.
// môžeme buď priamo vrátiť výsledok,
// alebo môžeme dočasne vytvoriť konštantu
// a vrátiť aj túto konštantu.
function multiplyTwoNums(num1, num2) {
const total = num1 * num2;
return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
return num1 * num2;
// dve funkcie vyššie nám dajú presne ten istý výsledok
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// môžeme skontrolovať rovnosť výsledkov funkcií
// s ďalšou funkciou
function checkEquality(number1, number2){
return number1 === number2;
// ak sú výsledky oboch funkcií rovnaké,
// funkcia checkEquality vráti "true"
// ako booleovský dátový typ
const isEqual = checkEquality(result1, result2);
// teraz môžeme použiť túto booleovskú hodnotu na zobrazenie správy
if (isEqual){
alert("Obe dávajú rovnaký výsledok!");
} else {
alert("Nie sú to rovnaké veci!");
}
Spustenie vyššie uvedeného kódu v Chrome Snippets by nám dalo nasledujúci výsledok:
Doteraz sme pracovali s čistými funkciami, a to je zvyčajne to, čo sa snažíme kódovať väčšinu času. Ale to neznamená, že budete pracovať iba s čistými funkciami. Akonáhle máte pochopenie čistých funkcií, nečisté funkcie sú relatívne jednoduchšie. Keď definujeme funkciu alebo deklarujeme funkciu, po použití názvu funkcie, v skutočnosti nemusíme odovzdávať žiadne parametre. V takom prípade necháme zátvorky prázdne, tiež nemusíme z funkcie niečo vrátiť.
Ešte viac, keďže môžeme napísať akýkoľvek kód vo vnútri zložených zátvoriek funkcie, môžeme interagovať s vonkajším svetom, posielať a prijímať dáta, upravovať existujúce dáta, zobrazovať upozornenia a tak ďalej. Robenie všetkého tohto nie je zakázané a pridávanie príkazov console.log počas procesu vývoja kódu môže byť naozaj užitočné. Preto sa priamo nevyhýbame nečistým funkciám, ale pretože môžu spôsobiť veľa trenia a chýb v kóde, vrátane toho, že váš kód je ťažšie testovateľný, budeme sa snažiť rozdeliť úlohy do čistých funkcií JavaScriptu, ako je to len možné. Aj keď používame na to, aby sme naše funkcie stali nečistými pridaním upozornení alebo príkazov console.log, zvyčajne ich chceme odstrániť z nášho kódu buď ich vymazaním, alebo zakomentovaním.
Pozrime sa na niektoré príklady toho.
// pozdraviť používateľa s nečistou funkciou
// neberie žiadne argumenty a nedáva žiadny návrat
// tiež interaguje s vonkajším svetom tým, že
// zobrazuje upozornenie
function greet(){
alert("Ahoj používateľ!");
}
// poznámka, že výsledky sa neukážu
// pokiaľ nezavoláme funkciu
greet();
// vykonať nejaké výpočty a zaznamenať ich do konzoly
function squareNum(num1){
const result = num1 * num1;
console.log(result);
}
// toto zobrazí výsledok v JavaScript konzole, ktorú máme nižšie
// Konzola, ktorú sme práve použili, je veľmi používaná v programovaní
// vrátane JavaScriptu.
// príkazy console.log môžu byť naozaj užitočné
// pri informovaní vás o tom, čo sa deje vo vašom programe
// týmto spôsobom, ak sa niečo neočakávané stane
// môžete presne vidieť, kde a kedy sa to stane
squareNum(7);
function multiplyTwoNums(num1, num2){
console.log("Prvé číslo je " + num1);
console.log("Druhé číslo je " + num2);
const result = num1 * num2;
console.log("Výsledná multiplikácia je " + result);
}
// zavolajme funkciu vyššie s dvoma číslami, ktoré si vyberieme // a skontrolujme našu JavaScript konzolu pre príkazy console.log multiplyTwoNums(5, 7);
Spustenie vyššie uvedeného kódu by viedlo k nasledujúcemu:
Ako vidíte z výstupu, máme príkaz alert, ktorý sa zobrazuje vo vnútri prvej funkcie, ktorú spúšťame. Máme výsledné číslo 49 zaznamenané v JavaScript konzole. Hneď po tom máme podrobnejší výstup v konzole o tretej funkcii. Vytváranie príkazov console.log je v programovaní pomerne bežné, v závislosti od programovacieho jazyka, ktorý používate, sa presný názov môže zmeniť, ale myšlienka zostáva rovnaká. S príkazmi console.log môžeme nahliadnuť do nášho programu a lepšie pochopiť náš kód. Toto je obzvlášť užitočný nástroj, keď sa vo vašom programe niečo pokazí a snažíte sa zistiť, kde presne ste urobili chybu.
V nasledujúcej lekcii uvidíme ďalšiu dôležitú tému v JavaScripte, ktorá sa nazýva objekty. Predtým, ako prejdeme na ďalšiu lekciu, je dobré si túto časť ešte raz prejsť, aby sa koncepty usadili. Taktiež veľmi odporúčam, aby ste si napísali príklady, na ktorých sme pracovali, a zažili ich na vlastnej koži. Keď budete pripravení, pokračujeme s objektmi v JavaScripte v nasledujúcej lekcii.
Robert Whitney
Odborník na JavaScript a inštruktor, ktorý školí IT oddelenia. Jeho hlavným cieľom je zvýšiť produktivitu tímu tým, že učí ostatných, ako efektívne spolupracovať pri programovaní.
