Hlavní obsah
Shrnutí: Funkce
Zde je přehled toho, co jsme probrali v lekci o funkcích.
Často když programuješ, hodilo by se ti spouštět určité bloky kódu znovu a znovu, aniž by se musely znovu psát. Potřebuješ způsob, jakým tyto bloky kódu seskupovat a pojmenovat je, aby se pak mohly tímto jménem později zavolat. A tomu se říká funkce.
Pro vytvoření funkce ji musíš nejprve deklarovat a pojmenovat, podobně jako když vytváříš proměnnou, a pak tuto funkci musíš definovat:
var sayHello = function() {
};Do této funkce můžeš vložit libovolný kód - jeden či více příkazů - podle toho, co chceš udělat. Výstupem této funkce je zpráva na náhodném místě:
var sayHello = function() {
text("Halllllllo!", random(200), random(200));
};Pokud tuto funkci pouze deklaruješ, nic se nestane. Aby program provedl kód uvnitř funkce, musíš tuto funkci zavolat, a to tak, že napíšeš její jméno následované prázdnými závorkami:
sayHello();Poté ji můžeš zavolat kolikrát chceš, kdykoli chceš!
sayHello();
sayHello();
sayHello();Často budeš chtít funkce pozměňovat, aby programu řekla "proveď celý kód, ale pár věcí v něm přeci jen pozměň." Tento kód pak bude zároveň znovu použitelný a přizpůsobivý. Toho docílíš pomocí "argumentů" funkce, tyto argumenty totiž mění fungování funkce a předávají se funkci při jejím zavolání.
Například, co když chceš přesně určit, kde se má zobrazit zpráva, stejně jako můžeš definovat, kde přesně se má vykreslit obdélník či elipsa pomocí funkcí rect() a ellipse()? Můžeš si to představit tak, že při zavolání se zpráva má zobrazit ve dvou přesných souřadnicích:
sayHello(50, 100);
sayHello(150, 200);Aby to fungovalo, musíš pozměnit definici funkce
sayHello tak, aby věděla, že dostane dva argumenty, které následně použije:var sayHello = function(xPos, yPos) {
text("Halllllllo!", xPos, yPos);
};Předávané argumenty jsou v podstatě podobné proměnným uvnitř definice funkce a jejich jména určíš tak, že je vepíšeš do závorek. Taky se dají snadno přejmenovat na něco kratšího:
var sayHello = function(x, y) {
text("Halllllllo!", x, y);
};Funkce jsou schopné přijmout libovolný počet argumentů - žádný, jeden, dva či více. Taky můžeš třeba chtít, aby tvoje funkce přijala určité jméno jako argument a pak toto jméno pozdravila:
var sayHello = function(name) {
text("Halllllllo, " + name, random(200), random(200));
};Potom ji takto zavoláš:
sayHello("Winston");
sayHello("Pamela");Tyto nápady můžeš taky kombinovat, funkce tedy přijme tři argumenty - jméno a souřadnice:
var sayHello = function(name, x, y) {
text("Halllllllo " + name, x, y);
};A pak ji takto zavoláš:
sayHello("Winston", 10, 100);Závisí to pouze na tom, kolik chceš, aby toho tvoje funkce dělaly. Vždycky můžeš začít s funkcí bez argumentů a pak přidávat další, když si uvědomíš, že je potřebuješ.
Celou dobu, co jsme kreslili tvary a dělali animace jsme vlastně volali funkce - jako například
rect, ellipse, triangle, atd. Všechny tyto funkce jsou z knihovny ProcessingJS a jsou zde nahrány do každého programu, který používáš. Již dříve jsme je pro tebe nadefinovali, protože nám přišly užitečné, a je jen na tobě, jaké vlastní funkce použiješ pro své programy. Tak například, poskytli jsme ti funkci ellipse, ale už ne funkci kočka - pokud tvůj program používá spoustu koček, možná by bylo lepší si vytvořit vlastní funkci kočka.Existuje další skvělá věc, kterou lze provádět s funkcemi - můžeš je používat k tomu, aby převzaly určité hodnoty, spočítaly je a vrátily novou hodnotu. Představ si kalkulačku - můžeš sčítat, odčítat, násobit, odmocňovat, atd. Tohle všechno lze udělat pomocí funkcí, které vezmou vstupní hodnoty a zobrazí výstup. Tyto funkce by jako vstupní hodnoty vzaly argumenty a vrátí výsledek pomocí návratového příkazu return. Zde je příklad funkce, která sečte dvě čísla a vrátí výsledek:
var addNumbers = function(num1, num2) {
var result = num1 + num2;
return result;
};
var sum = addNumbers(5, 2);
text(sum, 200, 200); // Vrátí "7"Návratový příkaz return provádí dvě věci: vrátí hodnotu zpět tomu, kdo zavolal funkci (proto jej můžeme uložit do proměnné
sum), a také okamžitě ukončí funkci. Následující kód je proto hloupě napsaný, jelikož poslední řádek by se vůbec neprovedl:var addNumbers = function(num1, num2) {
var result = num1 + num2;
return result;
result = result * 2; // hloupé!
};Funkce s návratovými hodnotami jsou velmi užitečné pro manipulaci s daty v programech, a mohou být dokonce kombinovány do výrazů:
var biggerSum = addNumbers(2, 5) + addNumbers(3, 2);Funkce můžeš dokonce volat uvnitř volání jiných funkcí, i když pak kód může být hůře čitelný:
var hugeSum = addNumbers(addNumbers(5, 2), addNumbers(3, 7));Když už teď víš jak vytvářet funkce, které obalí bloky kódu, musíš se zaměřit na důležitý související problém: lokální proměnné versus globální proměnné.
Když deklaruješ novou proměnnou uvnitř funkce, tato proměnná je k dispozici pro danou funkci. To proto, že pouze tato funkce tuto proměnnou vidí - zbytek programu ne. Jakmile jsi mimo tuto funkci, je to jakoby tato proměnná neexistovala. V následující funkci je proměnná
localResult lokální proměnná.var addNumbers = function(num1, num2) {
var localResult = num1 + num2;
println("Místní výsledek je: " + localResult);
return localResult;
};
addNumbers(5, 7);
println(localResult); // ajaj!Pokud tento kód spustíš, na poslední řádce dostaneš chybu "localResult is not defined." Tato proměnná je definována pouze uvnitř funkce, jelikož tam je taky deklarována pomocí řádku
var localResult = a není tak definována mimo tuto funkci.Když deklaruješ proměnnou vně funkce, tato proměnná se nazývá globální. To proto, že k ní mají přístup všechny funkce a mohou s ní dělat cokoliv.
var globalResult;
var addNumbers = function(num1, num2) {
globalResult = num1 + num2;
println("Globální výsledek je: " + globalResult);
};
addNumbers(5, 7);
println(globalResult);Když spustíš kód viz výše, žádná chybová hláška se neobjeví, protože proměnná
globalResult je deklarovaná vně funkce, takže k ní má program přístup pokaždé kdy potřebuje.⚠️ Může tě lákat používat globální proměnné pro všechno, protože se tak vyhneš chybovým hláškám o tom, že proměnná není definována. Jenže právě globální proměnné jsou zdrojem chyb, které se pak hůře hledají. V rozsáhlejších nebo sdílených programech je velice snadné ztratit přehled, kde a jak (ty nebo ostatní spolupracovníci!) tyto globální proměnné používáte. Pokud je to možné, používej lokální proměnné.
Každý programovací jazyk je jiný, ale pro JavaScript je nutné si zapamatovat, že proměnné mají "funkční rozsah" - funkce může vidět lokální proměnné, pokud jsou deklarované uvnitř této funkce, a globální proměnné deklarované mimo tuto funkci, ale nemůže vidět lokální proměnné deklarované uvnitř jiných funkcí.
Chceš se zapojit do diskuze?
Zatím žádné příspěvky.