Jak definiować funkcje w JavaScript

wprowadzenie

funkcja jest blokiem kodu, który wykonuje akcję lub zwraca wartość. Funkcje są niestandardowym kodem zdefiniowanym przez programistów, które są wielokrotnego użytku, a zatem mogą sprawić, że Twoje programy będą bardziej modułowe i wydajne.

w tym samouczku nauczymy się kilku sposobów definiowania funkcji, wywoływania funkcji i używania parametrów funkcji w JavaScript.

definiowanie funkcji

funkcje są definiowane lub deklarowane za pomocą słowa kluczowegofunction. Poniżej znajduje się składnia funkcji w JavaScript.,

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

deklaracja zaczyna się od słowa kluczowego function, po którym następuje nazwa funkcji. Nazwy funkcji są zgodne z tymi samymi regułami co zmienne — mogą zawierać litery, cyfry, podkreślniki i znaki dolara i często są zapisywane wielkością wielbłąda. Po nazwie znajduje się zestaw nawiasów, które mogą być użyte dla opcjonalnych parametrów. Kod funkcji jest zawarty w nawiasach klamrowych, podobnie jak instrukcja for lub Instrukcja if.,

w naszym pierwszym przykładzie zrobimy deklarację funkcji, aby wydrukować deklarację powitania na konsoli.

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

tutaj mamy kod do wydrukowaniaHello, World!do konsoli znajdującej się wewnątrz funkcjigreet(). Jednak nic się nie stanie i żaden kod nie zostanie wykonany, dopóki nie wywołamy lub nie wywołamy funkcji. Możesz wywołać funkcję, wpisując nazwę funkcji, po której następują nawiasy.

// Invoke the functiongreet();

teraz połączymy je razem, definiując naszą funkcję i wywołując ją.

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

z wywołaniemgreet();, funkcja zostanie uruchomiona i otrzymamy Hello, World! jako wyjście programu.

Output
Hello, World!

teraz mamy nasz kodgreet() zawarty w funkcji i możemy go ponownie używać tyle razy, ile chcemy.

używając parametrów możemy uczynić kod bardziej dynamicznym.

parametry funkcji

w naszym plikugreet.js stworzyliśmy podstawową funkcję, która drukujeHello, World do konsoli., Wykorzystując parametry możemy dodać dodatkowe funkcjonalności, które uelastycznią kod. Parametry są wejściami, które są przekazywane do funkcji jako nazwy i zachowują się jak zmienne lokalne.

Kiedy użytkownik loguje się do aplikacji, możemy chcieć, aby program powitał go po imieniu, zamiast po prostu mówić: „Witaj, świecie!”.

dodamy parametr do naszej funkcji o nazwiename, aby reprezentować imię osoby witanej.,

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

nazwa funkcji togreet, a teraz mamy jeden parametr w nawiasach. Nazwa parametru jest zgodna z tymi samymi zasadami co nazwa zmiennej. Wewnątrz funkcji, zamiast statycznego łańcucha składającego się z Hello, World, mamy szablon dosłowny łańcuch zawierający nasz parametr, który teraz zachowuje się jak zmienna lokalna.

zauważysz, że nigdzie nie zdefiniowaliśmy naszego parametruname. Przypisujemy jej wartość, gdy wywołujemy naszą funkcję., Zakładając, że nasz użytkownik nazywa się Sammy, wywołamy funkcję i umieścimy nazwę użytkownika jako argument. Argument jest rzeczywistą wartością przekazywaną do funkcji, w tym przypadku jest to łańcuch "Sammy".

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

wartość"Sammy" jest przekazywana do funkcji za pomocą parametruname. Teraz za każdym razem, gdy name jest używana w całej funkcji, będzie ona reprezentować wartość "Sammy". Oto cały kod.

Kiedy uruchomimy powyższy program, otrzymamy następujące wyjście.

Output
Hello, Sammy!

teraz mamy przykład jak funkcja może być ponownie użyta. W rzeczywistym przykładzie funkcja pobierałaby nazwę Użytkownika z bazy danych zamiast bezpośrednio podawać nazwę jako wartość argumentu.

oprócz parametrów, zmienne mogą być deklarowane wewnątrz funkcji. Zmienne te są znane jako zmienne lokalne i będą istnieć tylko wewnątrz zakresu własnego bloku funkcyjnego., Zakres zmiennych określa dostępność zmiennych; zmienne zdefiniowane wewnątrz funkcji nie są dostępne spoza funkcji, ale mogą być używane tyle razy, ile ich funkcja jest używana w całym programie.

zwracanie wartości

w funkcji można użyć więcej niż jednego parametru. Możemy przekazać wiele wartości do funkcji i zwrócić wartość. Utworzymy funkcję znajdującą sumę dwóch wartości, reprezentowanych przez x I y.

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

w powyższym programie zdefiniowaliśmy funkcję z parametrami x I y, a następnie przekazaliśmy wartości 9 I 7 do funkcji. Kiedy uruchomimy program, otrzymamy sumę tych liczb jako wynik.

Output
16

w tym przypadku, z 9 I 7 przekazanym do sum() program zwrócił 16.,

Gdy używane jest słowo kluczowe return, funkcja przestaje być wykonywana i zwracana jest wartość wyrażenia. Chociaż w tym przypadku przeglądarka wyświetli wartość w konsoli, nie jest to to samo, co użycie console.log() do wydruku na konsoli. Wywołanie funkcji wyświetli wartość dokładnie tam, gdzie funkcja została wywołana. Wartość ta może być użyta natychmiast lub umieszczona w zmiennej.

wyrażenia funkcji

w ostatniej sekcji użyliśmy deklaracji funkcji, aby uzyskać sumę dwóch liczb i zwrócić tę wartość., Możemy również utworzyć wyrażenie funkcji poprzez przypisanie funkcji do zmiennej.

używając tego samego przykładu funkcji add, możemy bezpośrednio zastosować zwracaną wartość do zmiennej, w tym przypadku sum.

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

Output
25

terazsum stała jest funkcją. Możemy uczynić to wyrażenie bardziej zwięzłym, zamieniając je w funkcję anonimową, która jest funkcją nienazwaną., Obecnie nasza funkcja ma nazwę add, ale w przypadku wyrażeń funkcji nie jest konieczne nazywanie funkcji i nazwa jest zwykle pomijana.

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

Output
103

w tym przykładzie usunęliśmy nazwę funkcji, która brzmiała add I przekształciliśmy ją w funkcję anonimową. Nazwane wyrażenie funkcji może być użyte do pomocy w debugowaniu, ale zwykle jest ono pomijane.,

funkcje strzałek

do tej pory udało nam się zdefiniować funkcje za pomocą słowa kluczowegofunction. Istnieje jednak nowsza, bardziej zwięzła metoda definiowania funkcji znanej jako arrow function expressions od ECMAScript 6. Funkcje strzałek, jak są powszechnie znane, są reprezentowane przez znak równości, po którym następuje znak większy niż: =>.

funkcje strzałek są zawsze funkcjami anonimowymi i typem wyrażenia funkcji. Możemy stworzyć podstawowy przykład, aby znaleźć iloczyn dwóch liczb.

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

Output
120

zamiast wypisywać słowo kluczowe function, używamy strzałki => do wskazania funkcji. W przeciwnym razie działa podobnie do wyrażenia funkcji regularnych, z pewnymi zaawansowanymi różnicami, o których można przeczytać w sekcji Funkcje strzałek w Mozilla Developer Network.

w przypadku tylko jednego parametru można wykluczyć nawiasy. W tym przykładzie ustawiamy kwadrat x, który wymaga podania tylko jednej liczby jako argumentu., Nawiasy zostały pominięte.

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

Output
64

Uwaga: w przypadku braku parametrów, pusty zestaw nawiasów() jest wymagany w funkcjach strzałki.

z tymi konkretnymi przykładami, które składają się tylko z instrukcjireturn, funkcje strzałek pozwalają jeszcze bardziej zmniejszyć składnię. Jeśli funkcja jest tylko jedną linią return , zarówno nawiasy klamrowe, jak i polecenie return można pominąć, jak pokazano w poniższym przykładzie.,

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

Output
100

wszystkie trzy tego typu składnie dają to samo wyjście. To jest zazwyczaj kwestia preferencji lub standardów kodowania firmy, aby zdecydować, jak będzie struktura własnych funkcji.

podsumowanie

w tym tutorialu omówiliśmy deklaracje funkcji i wyrażenia funkcji, zwracanie wartości z funkcji, przypisywanie wartości funkcji do zmiennych oraz funkcje strzałek ES6.

funkcje to bloki kodu, które zwracają wartość lub wykonują akcję, dzięki czemu programy są skalowalne i modułowe.