Tworzenie funkcji w JavaScript

Funkcja to fragment kodu wielokrotnego użytku, który jest uruchamiany po wywołaniu. Funkcje umożliwiają ponowne użycie kodu, czyniąc go bardziej modułowym i łatwiejszym w utrzymaniu.

Istnieje kilka sposobów tworzenia funkcji w JavaScript. Tutaj nauczysz się różnych sposobów tworzenia funkcji i jak z nich korzystać.

Deklaracje funkcji: prosta droga

Jednym ze sposobów tworzenia funkcji w JavaScript są deklaracje funkcji. Deklaracja funkcji to funkcja w JavaScript, która jest zgodna z poniższą składnią.

funkcjonowaćnazwa funkcji(parametry) {
// kod idzie tutaj...
powrót„To jest deklaracja funkcji”;
}

Komponenty powyższego bloku kodu obejmują:

• The funkcjonować słowo kluczowe: To słowo kluczowe deklaruje funkcję.
• nazwa funkcji: To jest nazwa funkcji. W praktyce powinien być jak najbardziej opisowy i znaczący, wskazując, co robi funkcja.
• parametry
  instagram viewer
  : Reprezentuje parametry funkcji. Parametry to opcjonalna lista zmiennych, które można przekazać do funkcji podczas jej wywoływania.
• Treść funkcji: zawiera kod, który funkcja uruchomi, gdy ją wywołasz. Jest otoczony nawiasami klamrowymi {} i może zawierać dowolny prawidłowy kod JavaScript.
• The powrót instrukcja: Ta instrukcja zatrzymuje wykonywanie funkcji i zwraca określoną wartość. W powyższym przypadku wywołanie funkcji zwróci ciąg „To jest deklaracja funkcji”.

Na przykład poniższa deklaracja funkcji przyjmuje trzy liczby jako parametry i zwraca ich sumę.

funkcjonowaćdodaj trzy liczby(a, b, c) {
powrót a + b + do;
}

Aby wywołać deklarację funkcji w JavaScript, wpisz nazwę funkcji, po której następuje zestaw nawiasów (). Jeśli funkcja przyjmuje jakiekolwiek parametry, przekaż je jako argumenty w nawiasach.

Na przykład:

dodajTrzyLiczby(1, 2, 3) // 6

Powyższy blok kodu wywołuje dodaj trzy liczby funkcji i przekazuje 1, 2 i 3 jako argumenty funkcji. Jeśli uruchomisz ten kod, zwróci on wartość 6.

Podnośniki JavaScript deklaracje funkcji, co oznacza, że ​​możesz je wywołać przed ich zdefiniowaniem.

Na przykład:

jest podniesiony(); // Funkcja jest podnoszona
funkcjonowaćjest podniesiony() {
konsola.dziennik(„Funkcja jest podniesiona”);
powrótPRAWDA;
}

Jak pokazano w powyższym bloku kodu, wywołanie jest podniesiony przed zdefiniowaniem nie spowodowałoby błędu.

Wyrażenia funkcyjne: Funkcje jako wartości

W JavaScript możesz zdefiniować funkcję jako wyrażenie. Następnie możesz przypisać wartość funkcji do zmiennej lub użyć jej jako argumentu innej funkcji.

Są one również znane jako funkcje anonimowe, ponieważ nie mają nazw i można je wywoływać tylko ze zmiennej, do której zostały przypisane.

Poniżej znajduje się składnia wyrażenia funkcji:

konst nazwa funkcji = funkcjonować () {
powrót„Wyrażenie funkcji”;
};

Aby wywołać wyrażenie funkcyjne w JavaScript, wpisz nazwę zmiennej, którą przypisałeś funkcji, po której następuje zestaw nawiasów (). Jeśli funkcja przyjmuje jakiekolwiek parametry, przekaż je jako argumenty w nawiasach.

Na przykład:

nazwafunkcji(); // Wyrażenie funkcyjne

Wyrażenia funkcyjne są przydatne podczas tworzenia funkcji, które działają w innych funkcjach. Typowe przykłady obejmują procedury obsługi zdarzeń i ich wywołania zwrotne.

Na przykład:

button.addEventListener("Kliknij", funkcjonować (wydarzenie) {
konsola.dziennik("Kliknąłeś przycisk!");
});

W powyższym przykładzie użyto wyrażenia funkcji, które przyjmuje wydarzenie argument jako wywołanie zwrotne do addEventListener funkcjonować. Nie musisz jawnie wywoływać funkcji, gdy używasz wyrażenia funkcji jako wywołania zwrotnego. Jest automatycznie wywoływana przez swoją funkcję nadrzędną.

W powyższym przypadku, gdy słuchacz zdarzeń odbierze a Kliknij zdarzenie, wywołuje funkcję wywołania zwrotnego i przekazuje wydarzenie obiekt jako argument.

W przeciwieństwie do deklaracji funkcji, wyrażenia funkcyjne nie są podnoszone, więc nie można ich wywołać przed ich zdefiniowaniem. Próba uzyskania dostępu do wyrażenia funkcji przed jej zdefiniowaniem spowoduje błąd a Błąd odniesienia.

Na przykład:

jest podniesiony(); // ReferenceError: Nie można uzyskać dostępu do „isHoisted” przed inicjalizacją
konst jest podniesiony = funkcjonować () {
konsola.dziennik(„Funkcja jest podniesiona”);
};

Funkcje strzałek: kompaktowe i ograniczone

ES6 wprowadził skrót do pisania anonimowych funkcji w JavaScript, zwany funkcjami strzałek. Mają zwięzłą składnię, która może sprawić, że Twój kod będzie bardziej czytelny, zwłaszcza w przypadku krótkich, jednowierszowych funkcji.

W przeciwieństwie do innych metod tworzenia funkcji, funkcje strzałek nie wymagają funkcjonować słowo kluczowe. Wyrażenie funkcji strzałki składa się z trzech części:

• Para nawiasów (()) zawierające parametry. Możesz pominąć nawiasy, jeśli funkcja ma tylko jeden parametr.
• Strzała (=>), który składa się ze znaku równości (=) i znak większości (>).
• Para nawiasów klamrowych zawierająca treść funkcji. Nawiasy klamrowe można pominąć, jeśli funkcja składa się z pojedynczego wyrażenia.

Na przykład:

// Pojedynczy parametr, niejawny powrót
konst nazwa funkcji = parametr =>konsola.dziennik(„Funkcja strzałki z jednym parametrem”)
// Wiele parametrów, wyraźny zwrot
konst nazwa funkcji = (parametr_1, parametr_2) => {
powrót„Funkcja strzałki wielu parametrów”
};

Gdy pominiesz nawiasy klamrowe, funkcja strzałki niejawnie zwraca pojedyncze wyrażenie, więc nie ma potrzeby powrót słowo kluczowe. Z drugiej strony, jeśli nie pominiesz nawiasów klamrowych, musisz jawnie zwrócić wartość za pomocą powrót słowo kluczowe.

Funkcje strzałek mają również inny Ten wiązanie w porównaniu do zwykłych funkcji. W funkcjach regularnych wartość Ten zależy od sposobu wywołania funkcji. W funkcji strzałki Ten jest zawsze związany z Ten wartość otaczającego zakresu.

Na przykład:

konst foo = {
 nazwa: „Dave”,
 powitać: funkcjonować () {
 setTimeout(() => {
konsola.dziennik(`Cześć, nazywam się ${Ten.nazwa}`);
 }, 1000);
 },
};
foo.pozdrawiam(); // Rejestruje „Cześć, nazywam się Dave” po 1 sekundzie

W powyższym przykładzie funkcja strzałki wewnątrz pliku powitać metoda ma dostęp to imię, nawet jeśli ustawiony limit czasu funkcja ją wywołuje. Normalna funkcja miałaby swoje Ten powiązany z obiektem globalnym.

Jak sama nazwa wskazuje, natychmiast wywoływana funkcja (IIFE) to funkcja, która jest uruchamiana natychmiast po jej zdefiniowaniu.

Oto struktura IIFE:

(funkcjonować () {
// kod tutaj
})();
(() => {
// kod tutaj
})();
(funkcjonować (parametr_1, parametr_2) {
konsola.log (param_1 * param_2);
})(2, 3);

IIFE składa się z wyrażenia funkcji owiniętego w parę nawiasów. Podążaj za nim z parą nawiasów poza obudową, aby wywołać funkcję.

Za pomocą IIFE można tworzyć zakresy, ukrywać szczegóły implementacji i udostępniać dane między wieloma skryptami. Kiedyś służyły jako tzw system modułów w JavaScript.

Tworzenie funkcji na wiele różnych sposobów

Zrozumienie, jak tworzyć funkcje w JavaScript, jest kluczowe. Dotyczy to zarówno podstawowej funkcji, która wykonuje proste obliczenia, jak i zaawansowanej funkcji, która wchodzi w interakcję z innymi częściami kodu.

Możesz użyć technik omówionych powyżej, aby zbudować funkcje w JavaScript oraz uporządkować i uporządkować swój kod. Wybierz podejście, które najlepiej odpowiada Twoim wymaganiom, ponieważ każde z nich ma różne zalety i zastosowania.