13 KiB

Raw Blame History Unescape Escape

Základy JavaScriptu: Metódy a funkcie

Sketchnote od Tomomi Imura

Kvíz pred prednáškou

Písanie rovnakého kódu opakovane je jednou z najčastejších frustrácií programovania. Funkcie tento problém riešia tým, že umožňujú zabaliť kód do opakovane použiteľných blokov. Predstavte si funkcie ako štandardizované časti, ktoré urobili revolúciu v montážnej linke Henryho Forda – keď raz vytvoríte spoľahlivú súčiastku, môžete ju použiť kdekoľvek bez nutnosti začínať od nuly.

Funkcie umožňujú zoskupiť časti kódu, aby ste ich mohli opakovane používať vo svojom programe. Namiesto kopírovania a vkladania rovnakého logického kódu všade môžete funkciu vytvoriť raz a zavolať ju vždy, keď je to potrebné. Tento prístup udržuje váš kód organizovaný a uľahčuje jeho aktualizáciu.

V tejto lekcii sa naučíte, ako vytvoriť vlastné funkcie, odovzdávať im informácie a získavať užitočné výsledky späť. Objavíte rozdiel medzi funkciami a metódami, naučíte sa moderné syntaktické prístupy a uvidíte, ako môžu funkcie spolupracovať s inými funkciami. Tieto koncepty budeme budovať krok za krokom.

🎥 Kliknite na obrázok vyššie pre video o metódach a funkciách.

Túto lekciu si môžete prejsť na Microsoft Learn!

Funkcie

Funkcia je samostatný blok kódu, ktorý vykonáva konkrétnu úlohu. Obsahuje logiku, ktorú môžete vykonať vždy, keď je to potrebné.

Namiesto písania rovnakého kódu viackrát vo vašom programe ho môžete zabaliť do funkcie a zavolať túto funkciu vždy, keď ju potrebujete. Tento prístup udržuje váš kód čistý a uľahčuje jeho aktualizáciu. Predstavte si, aké náročné by bolo upraviť logiku roztrúsenú na 20 rôznych miestach vo vašom kóde.

Je dôležité pomenovať svoje funkcie popisne. Dobre pomenovaná funkcia jasne komunikuje svoj účel – keď vidíte cancelTimer(), okamžite pochopíte, čo robí, rovnako ako jasne označené tlačidlo vám presne povie, čo sa stane, keď naň kliknete.

Vytvorenie a volanie funkcie

Pozrime sa, ako vytvoriť funkciu. Syntaktický vzor je konzistentný:

function nameOfFunction() { // function definition
 // function definition/body
}

Rozoberme si to:

Kľúčové slovo function hovorí JavaScriptu: "Hej, vytváram funkciu!"
nameOfFunction je miesto, kde dáte svojej funkcii popisné meno
Zátvorky () sú miesto, kde môžete pridať parametre (k tomu sa dostaneme čoskoro)
Zložené zátvorky {} obsahujú skutočný kód, ktorý sa spustí, keď zavoláte funkciu

Vytvorme jednoduchú funkciu na pozdrav, aby sme to videli v praxi:

function displayGreeting() {
  console.log('Hello, world!');
}

Táto funkcia vypíše "Hello, world!" do konzoly. Keď ju raz definujete, môžete ju použiť toľkokrát, koľkokrát je to potrebné.

Na vykonanie (alebo "volanie") vašej funkcie napíšte jej názov, za ktorým nasledujú zátvorky. JavaScript vám umožňuje definovať funkciu pred alebo po jej volaní – JavaScriptový engine sa postará o poradie vykonávania.

// calling our function
displayGreeting();

Keď spustíte tento riadok, vykoná sa všetok kód vo vašej funkcii displayGreeting, pričom sa v konzole vášho prehliadača zobrazí "Hello, world!". Túto funkciu môžete volať opakovane.

Poznámka: Počas týchto lekcií ste používali metódy. console.log() je metóda – v podstate funkcia, ktorá patrí objektu console. Kľúčový rozdiel je v tom, že metódy sú pripojené k objektom, zatiaľ čo funkcie stoja samostatne. Mnoho vývojárov používa tieto pojmy neformálne zameniteľne.

Najlepšie praktiky pri písaní funkcií

Tu je niekoľko tipov, ktoré vám pomôžu písať skvelé funkcie:

Dajte svojim funkciám jasné, popisné názvy – vaša budúca verzia vám poďakuje!
Používajte camelCasing pre názvy s viacerými slovami (napríklad calculateTotal namiesto calculate_total)
Udržujte každú funkciu zameranú na vykonávanie jednej veci dobre

Odovzdávanie informácií funkcii

Naša funkcia displayGreeting je obmedzená – dokáže zobraziť iba "Hello, world!" pre každého. Parametre nám umožňujú urobiť funkcie flexibilnejšie a užitočnejšie.

Parametre fungujú ako zástupné symboly, do ktorých môžete vložiť rôzne hodnoty pri každom použití funkcie. Týmto spôsobom môže tá istá funkcia pracovať s rôznymi informáciami pri každom volaní.

Parametre uvádzate v zátvorkách pri definovaní funkcie, pričom viaceré parametre oddeľujete čiarkami:

function name(param, param2, param3) {

}

Každý parameter funguje ako zástupný symbol – keď niekto zavolá vašu funkciu, poskytne skutočné hodnoty, ktoré sa vložia na tieto miesta.

Aktualizujme našu funkciu na pozdrav tak, aby prijímala meno osoby:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Všimnite si, ako používame spätné úvodzovky (`) a ${} na vloženie mena priamo do našej správy – toto sa nazýva šablónový literál a je to veľmi praktický spôsob, ako vytvárať reťazce s premennými zmiešanými dovnútra.

Teraz, keď zavoláme našu funkciu, môžeme odovzdať akékoľvek meno:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript vezme reťazec 'Christopher', priradí ho k parametru name a vytvorí personalizovanú správu "Hello, Christopher!"

Predvolené hodnoty

Čo ak chceme, aby niektoré parametre boli voliteľné? Tu prichádzajú na rad predvolené hodnoty!

Povedzme, že chceme, aby si ľudia mohli prispôsobiť slovo pozdravu, ale ak ho nešpecifikujú, použijeme ako záložné "Hello". Predvolené hodnoty môžete nastaviť pomocou znamienka rovnosti, rovnako ako pri nastavovaní premennej:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Tu je name stále povinné, ale salutation má záložnú hodnotu 'Hello', ak nikto neposkytne iný pozdrav.

Teraz môžeme túto funkciu zavolať dvoma rôznymi spôsobmi:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Pri prvom volaní JavaScript použije predvolené "Hello", pretože sme nešpecifikovali pozdrav. Pri druhom volaní použije náš vlastný "Hi". Táto flexibilita robí funkcie prispôsobiteľnými rôznym scenárom.

Návratové hodnoty

Naše funkcie doteraz len vypisovali správy do konzoly, ale čo ak chcete, aby funkcia niečo vypočítala a vrátila vám výsledok?

Tu prichádzajú na rad návratové hodnoty. Namiesto toho, aby funkcia niečo len zobrazila, môže vám vrátiť hodnotu, ktorú môžete uložiť do premennej alebo použiť v iných častiach vášho kódu.

Na odoslanie hodnoty späť použijete kľúčové slovo return, za ktorým nasleduje to, čo chcete vrátiť:

return myVariable;

Tu je niečo dôležité: keď funkcia narazí na príkaz return, okamžite prestane bežať a pošle túto hodnotu späť tomu, kto ju zavolal.

Upravme našu funkciu na pozdrav tak, aby namiesto vypisovania správy túto správu vrátila:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Teraz namiesto vypisovania pozdravu táto funkcia vytvorí správu a odovzdá ju späť nám.

Na použitie vrátenej hodnoty ju môžeme uložiť do premennej rovnako ako akúkoľvek inú hodnotu:

const greetingMessage = createGreetingMessage('Christopher');

Teraz greetingMessage obsahuje "Hello, Christopher" a môžeme ho použiť kdekoľvek v našom kóde – na zobrazenie na webovej stránke, zahrnutie do e-mailu alebo odovzdanie inej funkcii.

Funkcie ako parametre pre funkcie

Funkcie môžu byť odovzdané ako parametre iným funkciám. Aj keď sa tento koncept môže na začiatku zdať zložitý, je to silná funkcia, ktorá umožňuje flexibilné programovacie vzory.

Tento vzor je veľmi bežný, keď chcete povedať "keď sa niečo stane, urob túto inú vec." Napríklad "keď časovač skončí, spusti tento kód" alebo "keď používateľ klikne na tlačidlo, zavolaj túto funkciu."

Pozrime sa na setTimeout, čo je zabudovaná funkcia, ktorá čaká určitý čas a potom spustí nejaký kód. Musíme jej povedať, aký kód má spustiť – ideálny prípad na odovzdanie funkcie!

Vyskúšajte tento kód – po 3 sekundách uvidíte správu:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Všimnite si, ako odovzdávame displayDone (bez zátvoriek) do setTimeout. Funkciu nevoláme sami – odovzdávame ju setTimeout a hovoríme "zavolaj ju o 3 sekundy."

Anonymné funkcie

Niekedy potrebujete funkciu len na jednu vec a nechcete jej dávať meno. Zamyslite sa nad tým – ak používate funkciu iba raz, prečo zahlcovať svoj kód ďalším menom?

JavaScript vám umožňuje vytvárať anonymné funkcie – funkcie bez mien, ktoré môžete definovať presne tam, kde ich potrebujete.

Tu je, ako môžeme prepísať náš príklad s časovačom pomocou anonymnej funkcie:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Toto dosahuje rovnaký výsledok, ale funkcia je definovaná priamo v volaní setTimeout, čím sa eliminuje potreba samostatného vyhlásenia funkcie.

Funkcie so šípkou

Moderný JavaScript má ešte kratší spôsob písania funkcií, nazývaný arrow functions. Používajú => (čo vyzerá ako šípka – chápete?) a sú veľmi populárne medzi vývojármi.

Funkcie so šípkou vám umožňujú vynechať kľúčové slovo function a písať stručnejší kód.

Tu je náš príklad s časovačom pomocou funkcie so šípkou:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

() je miesto, kde by boli parametre (v tomto prípade prázdne), potom nasleduje šípka => a nakoniec telo funkcie v zložených zátvorkách. Toto poskytuje rovnakú funkcionalitu s kratšou syntaxou.

Kedy použiť jednotlivé stratégie

Kedy by ste mali použiť každý prístup? Praktická smernica: ak budete funkciu používať viackrát, dajte jej meno a definujte ju samostatne. Ak je to na jedno konkrétne použitie, zvážte anonymnú funkciu. Obe možnosti – funkcie so šípkou aj tradičná syntax – sú platné, aj keď funkcie so šípkou sú rozšírené v moderných JavaScriptových kódoch.

🚀 Výzva

Dokážete jednou vetou vysvetliť rozdiel medzi funkciami a metódami? Skúste to!

Výzva GitHub Copilot Agent 🚀

Použite režim Agent na splnenie nasledujúcej výzvy:

Popis: Vytvorte knižnicu užitočných matematických funkcií, ktorá demonštruje rôzne koncepty funkcií pokryté v tejto lekcii, vrátane parametrov, predvolených hodnôt, návratových hodnôt a funkcií so šípkou.

Zadanie: Vytvorte JavaScriptový súbor s názvom mathUtils.js, ktorý obsahuje nasledujúce funkcie:

Funkciu add, ktorá prijíma dva parametre a vracia ich súčet
Funkciu multiply s predvolenými hodnotami parametrov (druhý parameter predvolene 1)
Funkciu so šípkou square, ktorá prijíma číslo a vracia jeho druhú mocninu
Funkciu calculate, ktorá prijíma inú funkciu ako parameter a dve čísla, potom aplikuje túto funkciu na tieto čísla
Demonštrujte volanie každej funkcie s vhodnými testovacími prípadmi

Viac o režime agent sa dozviete tu.

Kvíz po prednáške

Opakovanie a samostatné štúdium

Stojí za to prečítať si trochu viac o funkciách so šípkou, pretože sa čoraz viac používajú v kódoch. Precvičte si písanie funkcie a potom ju prepíšte pomocou tejto syntaxe.

Zadanie

Zábava s funkciami

Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

13 KiB Raw Blame History Unescape Escape