Jak Definovat Funkce v Javascriptu

Úvod

funkce je blok kódu, který provádí akci nebo vrací hodnotu. Funkce jsou vlastní kód definovaný programátory, které jsou opakovaně použitelné, a proto mohou vaše programy modulárnější a efektivnější.

v tomto tutoriálu se naučíme několik způsobů, jak definovat funkci, zavolat funkci a použít funkční parametry v JavaScriptu.

definování funkce

funkce jsou definovány nebo deklarovány pomocí klíčového slova function. Níže je syntaxe funkce v JavaScriptu.,

function nameOfFunction() { // Code to be executed}

deklarace začíná klíčovým slovemfunction, následovaným názvem funkce. Názvy funkcí se řídí stejnými pravidly jako proměnné-mohou obsahovat písmena, čísla, podtržítka a znaky dolaru a jsou často psány v případě camel. Po názvu následuje sada závorek, které lze použít pro volitelné parametry. Kód funkce je obsažen v složených závorkách, stejně jako prohlášení for nebo prohlášení if.,

v našem prvním příkladu vytvoříme prohlášení o funkci pro tisk pozdravu do konzoly.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Tady máme kód pro tisk Hello, World! do konzole obsažené uvnitř greet() funkce. Nic se však nestane a žádný kód se neprovede, dokud se nezavoláme nebo nezavoláme funkci. Funkci můžete vyvolat napsáním názvu funkce následované závorkami.

// Invoke the functiongreet();

Nyní budeme dát dohromady, definující naše funkce a vyvolání.

pozdravit.,js

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

volat greet();, bude funkce run a my bude přijímat Hello, World! jako výstup programu.

Output
Hello, World!

Nyní máme greet() kód obsažený ve funkci, a může znovu použít tolikrát, kolikrát budeme chtít.

pomocí parametrů můžeme kód dynamičtější.

Parametry Funkce

V greet.js soubor, který jsme vytvořili základní funkce, která vytiskne Hello, World do konzole., Pomocí parametrů můžeme přidat další funkce, díky nimž bude kód flexibilnější. Parametry jsou vstupní, které se předávají do funkcí jako jména a chovají se jako lokální proměnné.

když se uživatel přihlásí do aplikace, možná budeme chtít, aby je program pozdravil podle jména, místo aby jen řekl: „Ahoj, svět!”.

přidáme parametr do funkce, se nazývá name zastupovat jméno osoby, je vítán.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

název funkce je greet a teď máme jeden parametr v závorkách. Název parametru se řídí stejnými pravidly jako pojmenování proměnné. Uvnitř funkce, namísto statického řetězce sestávajícího z Hello, World, máme doslovný řetězec šablony obsahující náš parametr, který se nyní chová jako místní proměnná.

všimnete si, že jsme nikde nedefinovali parametr name. Při vyvolání naší funkce mu přiřadíme hodnotu., Za předpokladu, že je náš uživatel pojmenován Sammy, zavoláme funkci a jako argument umístíme uživatelské jméno. Argument je skutečná hodnota, která se dostane do funkce, v tomto případě je to řetězec "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

hodnota "Sammy" je předán do funkce přes name parametr. Nyní pokaždé, když se v celé funkci použije name, bude představovat hodnotu "Sammy". Tady je celý kód.

pozdraví se.,js

když spustíme program výše, dostaneme následující výstup.

Output
Hello, Sammy!

nyní máme příklad toho, jak lze funkci znovu použít. V příkladu reálného světa by funkce vytáhla uživatelské jméno z databáze namísto přímého zadání názvu jako hodnoty argumentu.

kromě parametrů lze proměnné deklarovat i uvnitř funkcí. Tyto proměnné jsou známé jako lokální proměnné a budou existovat pouze v rámci vlastního funkčního bloku., Variabilní rozsah určuje proměnných dostupnost; proměnné, které jsou definovány uvnitř funkce jsou přístupné z mimo funkci, ale mohou být použity tolikrát, kolikrát jejich funkce se používá v celém programu.

vracející se hodnoty

ve funkci lze použít více než jeden parametr. Můžeme předat více hodnot do funkce a vrátit hodnotu. Vytvoříme funkci pro nalezení součtu dvou hodnot, reprezentovaných xa y.

součet.,js

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

V programu výše jsme definovali funkci s parametry x y, a pak prošel hodnoty 9 7 funkce. Když spustíme program, dostaneme součet těchto čísel jako výstup.

Output
16

V tomto případě 9 7 předán do sum() funkce, program se vrátil 16.,

když se použije Klíčové slovoreturn, funkce přestane fungovat a vrátí se hodnota výrazu. I když v tomto případě prohlížeč zobrazí hodnotu v konzole, není to stejné jako použití console.log() pro tisk na konzoli. Vyvoláním funkce se zobrazí hodnota přesně tam, kde byla funkce vyvolána. Tuto hodnotu lze použít okamžitě nebo umístit do proměnné.

Funkce Výrazy

V poslední části jsme použili deklaraci funkce, aby se součet dvou čísel, a vrátit hodnotu., Můžeme také vytvořit funkční výraz přiřazením funkce proměnné.

pomocí našeho stejného příkladuadd můžeme vrácenou hodnotu přímo aplikovat na proměnnou, v tomto případěsum.

functionExpression.JS

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

nyní sum konstanta je funkce. Tento výraz můžeme učinit stručnějším tím, že jej změníme na anonymní funkci, což je nejmenovaná funkce., V současné době má naše funkce název add, ale u funkčních výrazů není nutné funkci pojmenovat a název je obvykle vynechán.

anonymousExpression.js

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

V tomto příkladu jsme odstranili název funkce, která byla add, a obrátil ji do anonymní funkce. Pojmenovaný výraz funkce by mohl být použit na pomoc při ladění, ale obvykle je vynechán.,

Šipka Funkce

zatím jsme prošli, jak definovat funkce pomocí function klíčové slovo. Existuje však novější, stručnější metoda definování funkce známé jako výrazy se šipkami od ECMAScript 6. Arrow funkce, jak jsou běžně známé, jsou zastoupeny to rovnítko následované větší než znamení: =>.

funkce šipek jsou vždy anonymní funkce a typ výrazu funkce. Můžeme vytvořit základní příklad pro nalezení produktu dvou čísel.

šipkafunkce.,js

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

Namísto psaní ven klíčové slovo function použijeme => šipka označuje funkci. V opačném případě to funguje podobně jako výraz regulární funkce, s některými pokročilými rozdíly, o kterých si můžete přečíst pod funkcemi Arrow v síti Mozilla Developer Network.

v případě pouze jednoho parametru lze závorky vyloučit. V tomto příkladu jsme na druhou x, což vyžaduje pouze jedno číslo, které má být předáno jako argument., Závorky byly vynechány.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Poznámka: V případě žádné parametry, prázdné složené závorky () je nutné v arrow funkce.

tyto konkrétní příklady, které spočívají pouze v return prohlášení, šipky funkce umožňují syntaxe ještě více snížit. Pokud funkce je pouze jeden řádek return, oba složené závorky a return prohlášení může být vynechán, jak je vidět na příkladu níže.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

Všechny tři tyto typy syntaxe výsledek ve stejný výstup. Obecně je otázkou preferencí nebo standardů kódování společnosti rozhodnout, jak budete strukturovat své vlastní funkce.

Závěr

V tomto tutoriálu jsme se vztahuje deklarace funkce a funkce výrazy, vracení hodnot z funkcí, přiřazení hodnoty funkcí k proměnných, a ES6 šipka funkce.funkce

jsou bloky kódu, které vracejí hodnotu nebo provádějí akci, takže programy jsou škálovatelné a modulární.