Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Funkce je opakovaně použitelná část kódu, která se spustí, když ji vyvoláte. Funkce umožňují opětovné použití kódu, díky čemuž je modulárnější a snadněji se udržuje.

Existuje několik způsobů, jak vytvářet funkce v JavaScriptu. Zde se naučíte různé způsoby vytváření funkcí a jak je používat.

Deklarace funkcí: Přímá cesta

Jedním ze způsobů, jak vytvořit funkce v JavaScriptu, jsou deklarace funkcí. Deklarace funkce je funkce v JavaScriptu, která se řídí níže uvedenou syntaxí.

funkcenázev funkce(parametry) {
// kód jde sem...
vrátit se"Toto je deklarace funkce";
}

Komponenty výše uvedeného bloku kódu zahrnují:

  • The funkce klíčové slovo: Toto klíčové slovo deklaruje funkci.
  • název funkce: Toto je název funkce. V praxi by měl být co nejvíce popisný a smysluplný a měl by naznačovat, co funkce dělá.
  • parametry: Představuje parametry funkce. Parametry jsou volitelný seznam proměnných, které můžete předat funkci, když ji voláte.
    • instagram viewer
  • Tělo funkce: Obsahuje kód, který funkce spustí, když ji zavoláte. Je obklopena složenými závorkami {} a může obsahovat jakýkoli platný kód JavaScript.
  • The vrátit se příkaz: Tento příkaz zastaví provádění funkce a vrátí zadanou hodnotu. Ve výše uvedeném případě by volání funkce vrátilo řetězec „Toto je deklarace funkce“.

Například níže uvedená deklarace funkce bere jako parametry tři čísla a vrací jejich součet.

funkceaddThreeNumbers(a, b, c) {
vrátit se a + b + c;
}

Chcete-li volat deklaraci funkce v JavaScriptu, napište název funkce následovaný sadou závorek (). Pokud funkce přebírá nějaké parametry, předejte je jako argumenty v závorkách.

Například:

addThreeNumbers(1, 2, 3) // 6

Výše uvedený blok kódu volá addThreeNumber funkce a předá 1, 2 a 3 jako argumenty funkci. Pokud tento kód spustíte, vrátí hodnotu 6.

JavaScript výtahy deklarace funkcí, což znamená, že je můžete volat předtím, než je definujete.

Například:

isHoisted(); // Funkce je zvednuta
funkceisHoisted() {
řídicí panel.log("Funkce je zvednutá");
vrátit seskutečný;
}

Jak je znázorněno v bloku kódu výše, volání isHoisted před definováním by to nevyvolalo chybu.

Funkční výrazy: Funkce jako hodnoty

V JavaScriptu můžete definovat funkci jako výraz. Hodnotu funkce pak můžete přiřadit proměnné nebo ji použít jako argument jiné funkce.

Jsou také známé jako anonymní funkce, protože nemají žádná jména a můžete je volat pouze z proměnné, ke které jste je přiřadili.

Níže je syntaxe výrazu funkce:

konst functionName = funkce () {
vrátit se"Výraz funkce";
};

Chcete-li volat výraz funkce v JavaScriptu, napište název proměnné, který jste funkci přiřadili, následovaný sadou závorek (). Pokud funkce přebírá nějaké parametry, předejte je jako argumenty v závorkách.

Například:

functionName(); // Výraz funkce

Funkční výrazy jsou užitečné při vytváření funkcí, které běží v jiných funkcích. Typické příklady zahrnují obslužné rutiny událostí a jejich zpětná volání.

Například:

button.addEventListener("kliknout", funkce (událost) {
řídicí panel.log("Kliknul jsi na tlačítko!");
});

Výše uvedený příklad použil výraz funkce, který přebírá an událost argument jako zpětné volání k addEventListener funkce. Když použijete výraz funkce jako zpětné volání, nemusíte funkci explicitně volat. Automaticky je volána svou rodičovskou funkcí.

Ve výše uvedeném případě, když posluchač události obdrží a klikněte událost, zavolá funkci zpětného volání a předá událost objekt jako argument.

Na rozdíl od deklarací funkcí se výrazy funkcí nevytahují, takže je nemůžete volat, než je definujete. Pokus o přístup k funkčnímu výrazu před jeho definováním bude mít za následek a ReferenceError.

Například:

isHoisted(); // ReferenceError: Nelze získat přístup k 'isHoisted' před inicializací
konst isHoisted = funkce () {
řídicí panel.log("Funkce je zvednutá");
};

Funkce šipek: Kompaktní a omezené

ES6 představil zkratku pro psaní anonymních funkcí v JavaScriptu nazvanou funkce šipky. Mají stručnou syntaxi, díky které bude váš kód čitelnější, zejména při práci s krátkými jednořádkovými funkcemi.

Na rozdíl od jiných metod vytváření funkcí, funkce šipek nevyžadují funkce klíčové slovo. Výraz funkce šipky se skládá ze tří částí:

  • Pár závorek (()) obsahující parametry. Pokud má funkce pouze jeden parametr, můžete závorky vynechat.
  • Šíp (=>), který se skládá ze znaménka rovná se (=) a znaménko větší než (>).
  • Pár složených závorek obsahujících tělo funkce. Pokud se funkce skládá z jediného výrazu, můžete složené závorky vynechat.

Například:

// Jediný parametr, implicitní návrat
konst functionName = parametr =>řídicí panel.log("Funkce šipky s jedním parametrem")
// Více parametrů, explicitní návrat
konst functionName = (parametr_1, parametr_2) => {
vrátit se"Funkce šipky více parametrů"
};

Když vynecháte složené závorky, funkce šipky implicitně vrátí jediný výraz, takže není potřeba vrátit se klíčové slovo. Na druhou stranu, pokud nevynecháte složené závorky, musíte explicitně vrátit hodnotu pomocí vrátit se klíčové slovo.

Funkce šipek mají také jiné tento vazba ve srovnání s běžnými funkcemi. V běžných funkcích je hodnota tento záleží na tom, jak funkci voláte. Ve funkci šipky, tento je vždy vázán na tento hodnotu okolního pole.

Například:

konst foo = {
 název: "Dave",
 pozdravit: funkce () {
 setTimeout(() => {
řídicí panel.log('Dobrý den, jmenuji se ${tento.název}`);
 }, 1000);
 },
};
foo.greet(); // Záznamy "Ahoj, jmenuji se Dave" po 1 sekundě

Ve výše uvedeném příkladu funguje šipka uvnitř pozdravit metoda má přístup tohle jméno, i když setTimeout funkce to volá. Normální funkce by měla své tento vázaný na globální objekt.

Jak název napovídá, okamžitě vyvolaná funkce (IIFE) je funkce, která se spustí, jakmile je definována.

Zde je struktura IIFE:

(funkce () {
// kód zde
})();
(() => {
// kód zde
})();
(funkce (param_1, param_2) {
řídicí panel.log (param_1 * param_2);
})(2, 3);

IIFE se skládá z výrazu funkce zabaleného do dvojice závorek. Pro vyvolání funkce za ním následujte pár závorek mimo kryt.

IIFE můžete použít k vytvoření oborů, skrytí podrobností implementace a sdílení dat mezi více skripty. Kdysi byly používány jako a modulový systém v JavaScriptu.

Vytváření funkce mnoha různými způsoby

Pochopení toho, jak vytvářet funkce v JavaScriptu, je zásadní. To platí pro základní funkci, která provádí jednoduchý výpočet, nebo sofistikovanou funkci, která interaguje s ostatními částmi vašeho kódu.

Výše popsané techniky můžete použít k sestavení funkcí v JavaScriptu a strukturování a uspořádání kódu. Vyberte přístup, který nejlépe vyhovuje vašim požadavkům, protože každý má různé výhody a aplikace.