Pochopení funkcí v JavaScriptu

Tento článek byl původně napsán pro DigitalOcean.

Úvod

Funkce je blok kódu, který provede akci nebo vrátí hodnotu. Stejně jako pole v JavaScriptu mají vestavěné metody, které provádějí úkoly, lze funkce považovat za vlastní globální metody. Funkce jsou opakovaně použitelné, a proto mohou vaše programy učinit modulárnějšími a efektivnějšími.

V tomto článku se naučíme několik způsobů, jak definovat funkci v JavaScriptu, volání funkce a jak používat parametry funkce.

Definování funkce

Funkce jsou definovány nebo deklarovány pomocí function klíčové slovo. Níže je uvedena syntaxe funkce v JavaScriptu.

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

Deklarace začíná function klíčové slovo a za ním název funkce. Názvy funkcí se řídí stejnými pravidly jako proměnné – mohou obsahovat písmena, čísla, podtržítka a znaky dolaru a často jsou psány v velbloudím písmu. Za názvem následuje sada závorek, které lze použít pro volitelné parametry. Kód funkce je obsažen ve složených závorkách, stejně jako u příkazu for nebo if.

V našem prvním příkladu provedeme deklaraci funkce vytisknout pozdrav do konzole.

// Initialize greeting function
function greet() {
  console.log('Hello, World!')
}

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

// Invoke the function
greet()

Nyní je dáme dohromady, definujeme naši funkci a vyvoláme ji.

// Initialize greeting function
function greet() {
  console.log('Hello, World!')
}

// Invoke the function
greet()
Hello, World!

Nyní máme naše greet() kód obsažený ve funkci a můžeme jej znovu použít, kolikrát chceme. Pomocí parametrů můžeme udělat kód dynamičtější.

Parametry funkcí

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

Když se uživatel přihlásí do aplikace, můžeme ho chtít pozdravit jménem, ​​místo toho, abychom řekli:„Ahoj, světe!“.

Do naší funkce přidáme parametr nazvaný name , které představuje jméno vítané osoby.

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

Název funkce je greet a nyní máme jeden parametr uvnitř závorek. Název parametru se řídí stejnými pravidly jako pojmenování proměnné. Uvnitř funkce místo statického řetězce skládajícího se z Hello, World , máme šablonový doslovný řetězec obsahující náš parametr, který se nyní chová jako lokální proměnná.

Všimněte si, že jsme nedefinovali naše name parametr kdekoli. Při vyvolání naší funkce mu přiřadíme hodnotu. Za předpokladu, že se náš uživatel jmenuje Sammy, zavoláme funkci a umístíme uživatelské jméno jako argument . Argument je skutečná hodnota, která je předána funkci, v tomto případě "Sammy" .

// Invoke greet function with "Sammy" as the argument
greet('Sammy')

Hodnota "Sammy" je předán do funkce prostřednictvím name parametr. Nyní pokaždé name se používá v celé funkci, bude reprezentovat "Sammy" hodnota. Zde je celý kód.

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

// Invoke greet function with "Sammy" as the argument
greet('Sammy')
Hello, Sammy!

Nyní máme příklad, jak lze funkci znovu použít. V příkladu ze skutečného světa by funkce vytáhla uživatelské jméno z databáze namísto přímého dodání jména jako hodnoty argumentu.

Kromě parametrů lze uvnitř funkcí deklarovat proměnné. Tyto proměnné jsou známé jako místní proměnné a bude existovat pouze v rozsahu vlastního funkčního bloku. To umožňuje použít stejný název několikrát v programu bez problémů.

Vracející se hodnoty

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

// Initialize add function
function add(x, y) {
  return x + y
}

// Invoke function to find the sum
add(9, 7)
16

V tomto případě jsme předali hodnoty 9 a 7 na sum funkce vrátí celkovou hodnotu 16 .

Když return je použito klíčové slovo, funkce se přestane vykonávat a vrátí se hodnota výrazu. Ačkoli v tomto případě prohlížeč zobrazí hodnotu v konzole, není to totéž jako použití console.log() pro tisk na konzoli. Vyvolání funkce vypíše hodnotu přesně tam, kde byla funkce vyvolána. Tuto hodnotu lze použít okamžitě nebo ji umístit do proměnné.

Výrazy funkcí

Dříve jsme používali deklaraci funkce k získání součtu dvou čísel a vrácení této hodnoty. Můžeme také vytvořit výraz funkce přiřazením funkce k proměnné.

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

// Assign add function to sum constant
const sum = function add(x, y) {
  return x + y
}

// Invoke function to find the sum
sum(20, 5)
25

Nyní sum konstanta je funkce. Tento výraz můžeme zestručnit tím, že jej převedeme na anonymní funkci , což je nepojmenovaná funkce. V současné době má naše funkce název add , ale u funkčních výrazů to není nutné a obvykle se vynechává.

// Assign function to sum constant
const sum = function (x, y) {
  return x + y
}

// Invoke function to find the sum
sum(100, 3)
103

V tomto příkladu jsme odstranili název funkce, který byl add a přeměnil ji na anonymní funkci. Výraz pojmenované funkce může být použit jako pomůcka při ladění, ale obvykle se vynechává.

Funkce šipek

Zatím jsme se naučili, jak definovat funkce pomocí function klíčové slovo. Existuje však novější, stručnější metoda definice funkce známá jako výrazy funkce šipky od ECMAScript 6. Funkce šipek, jak jsou běžně známy, jsou reprezentovány znaménkem rovná se následovaným znaménkem větší než (=> ).

Funkce šipek jsou vždy anonymní funkce a typ výrazu funkce. Můžeme vytvořit jednoduchý příklad pro nalezení součinu dvou čísel.

// Define multiply function
const multiply = (x, y) => {
  return x * y
}

// Invoke function to find product
multiply(30, 4)
120

Místo vypisování function , používáme => šipku označující funkci. Jinak funguje podobně jako běžný výraz funkcí, s některými pokročilými rozdíly, o kterých si můžete přečíst v části Arrow Functions na Mozilla Developer Network.

V případě pouze jednoho parametru lze závorky vyloučit. V tomto příkladu provádíme druhou mocninu x , což vyžaduje, aby bylo jako argument předáno pouze jedno číslo. Závorky byly vynechány.

// Define square function
const square = (x) => {
  return x * x
}

// Invoke function to find product
square(8)
name

S těmito konkrétními příklady, které se skládají pouze z return příkaz, šipkové funkce umožňují syntaxi ještě více zmenšit. Pokud je funkce pouze jednořádková return , jak složené závorky, tak return příkaz lze vynechat, jak je vidět v příkladu níže.

// Define square function
const square = (x) => x * x

// Invoke function to find product
square(10)
100

Všechny tři tyto typy syntaxe vedou ke stejnému výstupu. Je obecně věcí preferencí nebo standardů kódování společnosti, abyste se rozhodli, jak budete strukturovat své vlastní funkce.

Závěr

Funkce jsou bloky kódu, které vracejí hodnotu nebo provádějí akci. V tomto článku jsme se zabývali deklaracemi funkcí a výrazy funkcí, vracením hodnot z funkcí, přiřazováním hodnot funkcí proměnným a funkcemi šipek ES6. Funkce se používají k tomu, aby byly programy škálovatelné a modulární. Chcete-li se dozvědět více o funkcích JavaScriptu obecně, přečtěte si Referenční informace o funkcích na Mozilla Developer Network.