JavaScript funkce. Část 7 JavaScript kurzu od začátečníka po pokročilého v 10 blogových příspěvcích

Toto je část 7 série blogových příspěvků o JavaScriptu, která vás provede od začátečníka po pokročilého. Na konci této série budete znát všechny základy, které potřebujete k tomu, abyste začali programovat v JavaScriptu. Bez dalších okolků, pojďme začít se sedmým tutoriálem.

Funkce JavaScriptu – obsah:

1. Typy funkcí JavaScriptu
2. Čisté funkce v JavaScriptu

Do této doby jsme viděli poměrně zásadní aspekty JavaScriptu spolu s některými z nejběžnějších osvědčených postupů, které bychom měli dodržovat. Tyto takzvané praktiky jsou zde z nějakého důvodu a jak je používáme, ušetří nám spoustu chyb a frustrace, kterým bychom čelili jinak. Jedním z nejlepších postupů, které jsme viděli, bylo dodržovat princip DRY, který v podstatě říká: Nepakujte se. Jedním ze způsobů, jak jsme tento princip aplikovali, bylo použití smyček v našem programu, konkrétně “for smyček”, které nám ušetřily spoustu času a kódu. V tomto tutoriálu uvidíme další zásadní stavební blok v programování, a to se nazývá “funkce”.

Typy funkcí JavaScriptu

Funkce jsou v programování extrémně běžné, a to zahrnuje i JavaScript. Ve skutečnosti jsou tak běžné, že některé JavaScriptové frameworky, jako je React, byly postaveny na využívání funkcí JavaScriptu jako základního stavebního bloku pro vytváření front-endu webových stránek. A to z dobrého důvodu. Funkce JavaScriptu poskytují vysokou flexibilitu, zatímco poskytují vysoce předvídatelný a modulární kód. A to vede k mnohem jasnějšímu kódu s méně opakováními a mnohem méně chybami. Jedna z prvních věcí, které byste měli vědět o funkcích, je, že existují dva hlavní typy funkcí. Jsou to “čisté funkce” a “nečisté funkce”. Obecně řečeno, budeme chtít používat čisté funkce, kde to bude možné, co nejvíce. Čisté funkce poskytují více výhod, které je činí mnohem snazšími na práci ve srovnání s nečistými funkcemi. Nejprve se podívejme na čisté funkce JavaScriptu a poté se ponoříme i do nečistých funkcí.

Čisté funkce v JavaScriptu

Čisté funkce jsou v podstatě funkce, které dodržují určitá pravidla. A protože dodržují tato pravidla, jsou vysoce předvídatelné, snáze se ladí v širším systému, modulární spolu s některými dalšími výhodami.

Čistá funkce přijímá nějaký vstup a vrací nějaký výstup. Nezměňuje vstupy přímo ani neinteraguje s prostředím jiným způsobem. To znamená, že vám neposílá upozornění, nedává vám prohlášení, zatímco dělá něco jiného, nebo neinteraguje se svým prostředím jiným způsobem.

Tímto způsobem, když pracujete s čistou funkcí, víte, že bez ohledu na to, kde spouštíte svůj kód nebo kdy spouštíte svůj kód, pokud dáte stejné vstupy, dostanete stejné výstupy. Pojďme se na to podívat na několika příkladech.

// zdvojnásobit počáteční číslo
function double(num){
    return num * 2;
}

// ztrojnásobit počáteční číslo
function triple(num){
    return num * 3;
}

// přidat 100 k počátečnímu číslu
function add100(num){
    return num + 100;
}

// přidat dvě čísla
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// vynásobit dvě čísla
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Všechny výše uvedené funkce JavaScriptu jsou čisté funkce. Při bližším pohledu jste si možná všimli vzoru, který používáme při vytváření čistých funkcí. Prvním krokem je napsat klíčové slovo “function”, abychom řekli JavaScriptu, že chceme definovat funkci.

Dalším krokem je pojmenovat funkci, ideálně by toto jméno mělo být krátké, ale dostatečně popisné, aby někdo, kdo přijde, pochopil, co funkce dělá. Například, pokud přidáváme 100 k číslu, můžeme funkci pojmenovat “add100”, pokud zdvojujeme číslo, můžeme funkci pojmenovat “double” a tak dále.

Jakmile jsme funkci správně pojmenovali, dalším krokem je poskytnout jí nějaké vstupy. Vstupy poskytujeme uvnitř závorek a pokud máme více vstupů, oddělujeme je čárkou. Přesně tak, jak jsme to udělali u funkce “multiplyTwoNums”. (Také, jako poznámka, čísla se v programování běžně označují jako “nums” pro zjednodušení, takže pokud pojmenováváme funkci, můžeme tuto obecnou znalost využít k tomu, abychom měli krátká, ale popisná jména funkcí.)

Vstupy, které poskytujeme funkci, se také běžně označují jako “parametry”, když vytváříme funkce JavaScriptu, rozhodujeme, kolik parametrů funkce bude mít. Když se rozhodneme použít funkci, poskytneme těmto parametrům “hodnoty”. Tyto hodnoty, které poskytujeme při používání funkce, se také běžně označují jako “argumenty”. Takže když poskytujeme vstup pro funkci, tento proces se také označuje jako “předávání argumentů” funkci. Pojďme se na to podívat na několika příkladech.

// nejprve definujme funkci, která vezme číslo 
// a vynásobí ho 10
function multiplyBy10(num1){
    return num1 * 10;
}

// nyní zavolejme tuto funkci
// uložte výsledek do konstanty
// a zobrazte výsledky
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 je zde parametr.
// předali jsme hodnotu 3 jako argument funkci.
// uložili jsme výsledky funkce
// do konstanty nazvané bigNum.
// zobrazili jsme konstantu nazvanou bigNum uživateli.

Jak jste viděli v výše uvedeném kódu, i když chceme něco zobrazit uživateli, udržujeme funkci oddělenou od funkce alert. Pokud bychom chtěli zobrazit výsledky uživateli uvnitř funkce, to by vyžadovalo, aby funkce interagovala s jinými částmi počítače a učinilo by naši funkci nečistou. Takže obecně řečeno, chceme používat funkce k tomu, abychom jim poskytli vstup a očekávali vrácenou hodnotu. Když dostaneme tuto vrácenou hodnotu, můžeme ji skutečně zobrazit nebo provádět další funkce JavaScriptu podle našich potřeb, ale podstatou je udržet obavy o zobrazování výsledků a výpočty výsledků odděleně.

Takže do této doby jsme viděli, že můžeme použít klíčové slovo “function” k zahájení deklarace funkce, poté funkci správně pojmenujeme, poté otevřeme a zavřeme závorky a řekneme funkci, jaké parametry bude potřebovat, poté otevřeme složené závorky a řekneme funkci, co chceme, aby dělala, jakmile dosáhneme výsledku, vrátíme tento výsledek pomocí klíčového slova “return”. A poté zavřeme složené závorky. Všechny tyto kroky byly potřebné k definování čisté funkce. Nyní, když máme funkci, můžeme funkci použít v jiných částech našeho programu. Použití funkce se běžně označuje jako “volání funkce”.

Volání funkce je mnohem jednodušší než deklarace funkce. K volání funkce můžeme použít její jméno, otevřít závorky, předat jí nějaké argumenty a zavřít závorky. Když to uděláme, funkce nám vrátí návratovou hodnotu, kterou jsme definovali. V závislosti na tom, co chceme provést s touto vrácenou hodnotou, ji můžeme přiřadit k proměnné nebo konstantě, můžeme s ní provádět ještě více výpočtů, můžeme ji poslat na jiné počítače, nebo můžeme také přímo zobrazit výsledky. Pojďme se na to podívat na několika příkladech.

// začněme s funkcí, která vezme dva argumenty
// vynásobí je a vrátí výsledek.
// můžeme buď přímo vrátit výsledek,
// nebo můžeme dočasně vytvořit konstantu 
// a vrátit také tuto konstantu.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// dvě funkce výše nám dají přesně stejný výsledek
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// můžeme zkontrolovat rovnost výsledků funkcí 
// s další funkcí
function checkEquality(number1, number2){
    return number1 === number2;
// pokud jsou výsledky obou funkcí stejné,
// funkce checkEquality vrátí "true" 
// jako boolean datový typ
const isEqual = checkEquality(result1, result2);
// nyní můžeme použít tuto boolean hodnotu k zobrazení zprávy
if (isEqual){
    alert("Obě dávají stejný výsledek!");
} else {
   alert("Není to to samé!");
}

Spuštění výše uvedeného kódu v Chrome Snippets by nám dalo následující výsledek:

Do této doby jsme pracovali s čistými funkcemi, a to je obvykle to, co se snažíme kódovat většinu času. Ale to neznamená, že budete pracovat pouze s čistými funkcemi. Jakmile máte pochopení čistých funkcí, nečisté funkce jsou relativně snazší. Když definujeme funkci, nebo deklarujeme funkci, po použití názvu funkce, ve skutečnosti nemusíme předávat žádné parametry. V takovém případě necháme závorky prázdné, také nemusíme z funkce něco vracet.

Ještě více, protože můžeme psát jakýkoli kód uvnitř složených závorek funkce, můžeme interagovat s vnějším světem, posílat a přijímat data, měnit existující data, zobrazovat upozornění a tak dále. Dělat to všechno není zakázáno, a přidání příkazů console.log během procesu vývoje kódu může být ve skutečnosti velmi užitečné. Proto se přímo nevyhýbáme nečistým funkcím, ale protože mohou způsobit spoustu tření a chyb v kódu, včetně ztížení testování vašeho kódu, budeme se snažit oddělit úkoly do čistých funkcí JavaScriptu co nejvíce. I když používáme k tomu, abychom naše funkce udělali nečistými přidáním příkazů alert nebo console.log, obvykle je chceme odstranit z našeho kódu buď jejich smazáním, nebo zakomentováním.

Pojďme se na to podívat na několika příkladech.

// pozdravit uživatele s nečistou funkcí
// nebere žádné argumenty a nedává žádný návrat
// také interaguje s vnějším světem tím, že 
// zobrazuje upozornění
function greet(){
    alert("Ahoj uživateli!");
}
// poznamenejte si, že výsledky se neukážou 
// pokud funkci nezavoláme
greet();
// provést nějaké výpočty a zapsat je do konzole
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// to zobrazí výsledek v JavaScriptové konzole, kterou máme níže
// Konzole, kterou jsme právě použili, je v programování velmi používaná
// včetně JavaScriptu.
// příkazy console.log mohou být opravdu užitečné 
// při informování o tom, co se děje uvnitř vašeho programu
// tímto způsobem, pokud se něco neočekávaného stane 
// můžete přesně vidět, kde a kdy se to stane
squareNum(7);
function multiplyTwoNums(num1, num2){
    console.log("První číslo je " + num1);
    console.log("Druhé číslo je " + num2);
    const result = num1 * num2;
    console.log("Výsledné násobení je " + result);
}

// zavolejme funkci výše s dvěma čísly, která si vybereme
// a zkontrolujme naši JavaScriptovou konzoli pro výpisy
multiplyTwoNums(5, 7);

Spuštění výše uvedeného kódu by vedlo k následujícímu:

Jak vidíte z výstupu, máme příkaz alert zobrazující se uvnitř první funkce, kterou spouštíme. Máme výsledné číslo 49 zapsané v JavaScriptové konzole. Hned poté máme podrobnější výstup v konzole o třetí funkci. Vytváření příkazů console.log je v programování docela běžné, v závislosti na programovacím jazyce, který používáte, se může přesný název změnit, ale myšlenka zůstává stejná. S příkazy console.log můžeme nahlédnout do našeho programu a lépe porozumět našemu kódu. To je obzvlášť užitečný nástroj, když se ve vašem programu něco pokazí a snažíte se zjistit, kde přesně jste udělali chybu.

V dalším tutoriálu uvidíme další důležité téma v JavaScriptu, které se nazývá objekty. Předtím, než přejdeme k dalšímu tutoriálu, je dobrý nápad znovu si projít tuto část, aby se koncepty usadily. Také velmi doporučuji napsat příklady, na kterých jsme pracovali, a zažít je na vlastní kůži. Až budete připraveni, budeme pokračovat s objekty v JavaScriptu v dalším tutoriálu.