13 KiB

Raw Blame History Unescape Escape

Základy JavaScriptu: Metody a funkce

Sketchnote od Tomomi Imura

Kvíz před lekcí

Opakované psaní stejného kódu je jedním z nejčastějších zdrojů frustrace při programování. Funkce tento problém řeší tím, že umožňují balit kód do znovupoužitelných bloků. Představte si funkce jako standardizované součástky, které učinily montážní linku Henryho Forda revoluční – jakmile vytvoříte spolehlivou komponentu, můžete ji použít kdekoli, aniž byste ji museli znovu vytvářet od začátku.

Funkce umožňují seskupit části kódu, které můžete znovu použít v celém programu. Místo kopírování a vkládání stejné logiky všude můžete funkci vytvořit jednou a volat ji, kdykoli je potřeba. Tento přístup udržuje váš kód organizovaný a usnadňuje jeho aktualizace.

V této lekci se naučíte, jak vytvořit vlastní funkce, předávat jim informace a získávat užitečné výsledky zpět. Objevíte rozdíl mezi funkcemi a metodami, naučíte se moderní syntaxi a uvidíte, jak mohou funkce spolupracovat s jinými funkcemi. Tyto koncepty budeme budovat krok za krokem.

🎥 Klikněte na obrázek výše pro video o metodách a funkcích.

Tuto lekci si můžete projít na Microsoft Learn!

Funkce

Funkce je samostatný blok kódu, který provádí konkrétní úkol. Obsahuje logiku, kterou můžete spustit, kdykoli je to potřeba.

Místo psaní stejného kódu několikrát v celém programu ho můžete zabalit do funkce a volat ji, kdykoli ji potřebujete. Tento přístup udržuje váš kód čistý a usnadňuje jeho aktualizaci. Představte si, jak náročné by bylo provést změny v logice, která je rozptýlená na 20 různých místech vašeho kódu.

Je důležité pojmenovávat své funkce popisně. Dobře pojmenovaná funkce jasně sděluje svůj účel – když vidíte cancelTimer(), okamžitě pochopíte, co dělá, stejně jako jasně označené tlačítko vám řekne, co se stane, když na něj kliknete.

Vytvoření a volání funkce

Podívejme se, jak vytvořit funkci. Syntaxe následuje konzistentní vzor:

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

Rozložme si to:

Klíčové slovo function říká JavaScriptu "Hej, vytvářím funkci!"
nameOfFunction je místo, kde dáte své funkci popisné jméno
Závorky () jsou místo, kam můžete přidat parametry (k tomu se brzy dostaneme)
Složené závorky {} obsahují skutečný kód, který se spustí, když funkci zavoláte

Vytvořme jednoduchou funkci pro pozdrav, abychom to viděli v praxi:

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

Tato funkce vypíše "Hello, world!" do konzole. Jakmile ji definujete, můžete ji použít tolikrát, kolikrát je potřeba.

Pro spuštění (nebo "volání") vaší funkce napište její jméno následované závorkami. JavaScript vám umožňuje definovat funkci před nebo po jejím volání – JavaScriptový engine se postará o pořadí provádění.

// calling our function
displayGreeting();

Když spustíte tento řádek, provede se veškerý kód uvnitř vaší funkce displayGreeting, který zobrazí "Hello, world!" v konzoli vašeho prohlížeče. Tuto funkci můžete volat opakovaně.

Poznámka: V průběhu těchto lekcí jste používali metody. console.log() je metoda – v podstatě funkce, která patří k objektu console. Klíčový rozdíl je v tom, že metody jsou připojeny k objektům, zatímco funkce stojí samostatně. Mnoho vývojářů tyto termíny používá zaměnitelně v neformální konverzaci.

Nejlepší postupy při psaní funkcí

Zde je několik tipů, které vám pomohou psát skvělé funkce:

Dávejte svým funkcím jasná, popisná jména – vaše budoucí já vám poděkuje!
Používejte camelCasing pro víceslovná jména (například calculateTotal místo calculate_total)
Každou funkci zaměřte na to, aby dobře vykonávala jednu věc

Předávání informací funkci

Naše funkce displayGreeting je omezená – může zobrazit pouze "Hello, world!" pro všechny. Parametry nám umožňují učinit funkce flexibilnějšími a užitečnějšími.

Parametry fungují jako zástupné symboly, kam můžete při každém použití funkce vložit různé hodnoty. Tímto způsobem může stejná funkce pracovat s různými informacemi při každém volání.

Parametry uvádíte do závorek při definování funkce, přičemž více parametrů oddělujete čárkami:

function name(param, param2, param3) {

}

Každý parametr funguje jako zástupný symbol – když někdo zavolá vaši funkci, poskytne skutečné hodnoty, které se vloží na tato místa.

Aktualizujme naši funkci pro pozdrav tak, aby přijímala jméno osoby:

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

Všimněte si, jak používáme zpětné uvozovky (`) a ${} k vložení jména přímo do naší zprávy – tomu se říká šablonová literálka a je to opravdu užitečný způsob, jak sestavit řetězce s proměnnými.

Nyní, když zavoláme naši funkci, můžeme předat jakékoli jméno:

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

JavaScript vezme řetězec 'Christopher', přiřadí ho k parametru name a vytvoří personalizovanou zprávu "Hello, Christopher!"

Výchozí hodnoty

Co když chceme, aby některé parametry byly volitelné? Zde přicházejí na řadu výchozí hodnoty!

Řekněme, že chceme, aby si lidé mohli přizpůsobit slovo pozdravu, ale pokud žádné nezadají, použijeme jako záložní možnost "Hello". Výchozí hodnoty můžete nastavit pomocí znaménka rovná se, stejně jako při nastavování proměnné:

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

Zde je name stále povinné, ale salutation má záložní hodnotu 'Hello', pokud nikdo neposkytne jiný pozdrav.

Nyní můžeme tuto funkci volat dvěma různými způsoby:

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

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

Při prvním volání JavaScript použije výchozí "Hello", protože jsme nespecifikovali pozdrav. Při druhém volání použije náš vlastní "Hi". Tato flexibilita činí funkce přizpůsobivými různým scénářům.

Návratové hodnoty

Naše funkce dosud pouze vypisovaly zprávy do konzole, ale co když chcete, aby funkce něco vypočítala a vrátila vám výsledek?

Zde přicházejí na řadu návratové hodnoty. Místo pouhého zobrazení něčeho může funkce vrátit hodnotu, kterou můžete uložit do proměnné nebo použít v jiných částech svého kódu.

K odeslání hodnoty zpět použijete klíčové slovo return následované tím, co chcete vrátit:

return myVariable;

Zde je důležité: když funkce narazí na příkaz return, okamžitě přestane běžet a vrátí tuto hodnotu tomu, kdo ji zavolal.

Upravme naši funkci pro pozdrav tak, aby místo vypisování zprávy ji vracela:

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

Nyní místo vypisování pozdravu tato funkce vytvoří zprávu a předá ji zpět.

K použití vrácené hodnoty ji můžeme uložit do proměnné stejně jako jakoukoli jinou hodnotu:

const greetingMessage = createGreetingMessage('Christopher');

Nyní greetingMessage obsahuje "Hello, Christopher" a můžeme ji použít kdekoli v našem kódu – k zobrazení na webové stránce, zahrnutí do e-mailu nebo předání jiné funkci.

Funkce jako parametry pro funkce

Funkce mohou být předány jako parametry jiným funkcím. I když se tento koncept může zpočátku zdát složitý, je to mocná funkce, která umožňuje flexibilní programovací vzory.

Tento vzor je velmi běžný, když chcete říct "když se něco stane, udělej tuto jinou věc." Například "když časovač skončí, spusť tento kód" nebo "když uživatel klikne na tlačítko, zavolej tuto funkci."

Podívejme se na setTimeout, což je vestavěná funkce, která čeká určitou dobu a poté spustí nějaký kód. Musíme jí říct, jaký kód má spustit – ideální případ pro předání funkce!

Vyzkoušejte tento kód – po 3 sekundách uvidíte zprávu:

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

Všimněte si, jak předáváme displayDone (bez závorek) do setTimeout. Funkci nevoláme sami – předáváme ji setTimeout a říkáme "zavolej ji za 3 sekundy."

Anonymní funkce

Někdy potřebujete funkci jen pro jednu věc a nechcete jí dávat jméno. Přemýšlejte o tom – pokud používáte funkci pouze jednou, proč zbytečně přidávat další jméno do svého kódu?

JavaScript vám umožňuje vytvářet anonymní funkce – funkce bez jmen, které můžete definovat přímo tam, kde je potřebujete.

Zde je, jak můžeme přepsat náš příklad s časovačem pomocí anonymní funkce:

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

Toto dosahuje stejného výsledku, ale funkce je definována přímo v rámci volání setTimeout, což eliminuje potřebu samostatné deklarace funkce.

Funkce s tučnou šipkou

Moderní JavaScript má ještě kratší způsob psaní funkcí, který se nazývá arrow functions. Používají => (které vypadá jako šipka – chápete?) a jsou mezi vývojáři velmi populární.

Arrow functions vám umožňují vynechat klíčové slovo function a psát stručnější kód.

Zde je náš příklad s časovačem pomocí arrow functions:

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

() je místo, kam by šly parametry (v tomto případě prázdné), pak následuje šipka => a nakonec tělo funkce ve složených závorkách. Toto poskytuje stejnou funkčnost s stručnější syntaxí.

Kdy použít kterou strategii

Kdy byste měli použít který přístup? Praktická směrnice: pokud budete funkci používat vícekrát, dejte jí jméno a definujte ji samostatně. Pokud je to pro jeden konkrétní účel, zvažte anonymní funkci. Oba přístupy – arrow functions i tradiční syntaxe – jsou platné, i když arrow functions jsou běžné v moderních JavaScriptových kódech.

🚀 Výzva

Dokážete jednou větou vysvětlit rozdíl mezi funkcemi a metodami? Zkuste to!

Výzva GitHub Copilot Agent 🚀

Použijte režim Agent k dokončení následující výzvy:

Popis: Vytvořte knihovnu užitečných matematických funkcí, která demonstruje různé koncepty funkcí pokryté v této lekci, včetně parametrů, výchozích hodnot, návratových hodnot a arrow functions.

Zadání: Vytvořte JavaScriptový soubor s názvem mathUtils.js, který obsahuje následující funkce:

Funkci add, která přijímá dva parametry a vrací jejich součet
Funkci multiply s výchozími hodnotami parametrů (druhý parametr má výchozí hodnotu 1)
Arrow function square, která přijímá číslo a vrací jeho druhou mocninu
Funkci calculate, která přijímá jinou funkci jako parametr a dvě čísla, poté aplikuje tuto funkci na tato čísla
Demonstrujte volání každé funkce s vhodnými testovacími případy

Více o režimu agent se dozvíte zde.

Kvíz po lekci

Přehled & Samostudium

Stojí za to přečíst si něco více o arrow functions, protože jsou stále více používány v kódech. Procvičte si psaní funkce a poté její přepis pomocí této syntaxe.

Úkol

Zábava s funkcemi

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlad Co-op Translator. Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.

13 KiB Raw Blame History Unescape Escape