10 KiB

Raw Blame History

Podstawy JavaScript: Metody i Funkcje

Sketchnotka autorstwa Tomomi Imura

Quiz przed wykładem

Kiedy myślimy o pisaniu kodu, zawsze chcemy, aby był on czytelny. Choć może to brzmieć paradoksalnie, kod jest czytany znacznie częściej niż pisany. Jednym z podstawowych narzędzi w zestawie programisty, które pomaga w tworzeniu łatwego do utrzymania kodu, jest funkcja.

🎥 Kliknij obrazek powyżej, aby obejrzeć wideo o metodach i funkcjach.

Możesz przerobić tę lekcję na Microsoft Learn!

Funkcje

Funkcja to w swojej istocie blok kodu, który możemy wykonać na żądanie. Jest to idealne rozwiązanie w sytuacjach, gdy musimy wykonać to samo zadanie wielokrotnie; zamiast duplikować logikę w wielu miejscach (co utrudniałoby jej aktualizację w przyszłości), możemy scentralizować ją w jednym miejscu i wywoływać, kiedy tylko zajdzie potrzeba - funkcje można nawet wywoływać z innych funkcji!

Równie ważna jest możliwość nadania funkcji nazwy. Choć może to wydawać się trywialne, nazwa stanowi szybki sposób na udokumentowanie fragmentu kodu. Można to porównać do etykiety na przycisku. Jeśli kliknę przycisk z napisem „Anuluj timer”, wiem, że zatrzyma on odliczanie.

Tworzenie i wywoływanie funkcji

Składnia funkcji wygląda następująco:

function nameOfFunction() { // function definition
 // function definition/body
}

Jeśli chciałbym stworzyć funkcję wyświetlającą powitanie, mogłaby wyglądać tak:

function displayGreeting() {
  console.log('Hello, world!');
}

Kiedy chcemy wywołać (lub uruchomić) naszą funkcję, używamy jej nazwy, a następnie (). Warto zauważyć, że funkcja może być zdefiniowana zarówno przed, jak i po jej wywołaniu; kompilator JavaScript znajdzie ją za nas.

// calling our function
displayGreeting();

NOTE: Istnieje specjalny rodzaj funkcji znany jako metoda, z którym już się spotkałeś! W rzeczywistości widzieliśmy to w naszym przykładzie powyżej, gdy używaliśmy console.log. To, co odróżnia metodę od funkcji, to fakt, że metoda jest przypisana do obiektu (w naszym przykładzie console), podczas gdy funkcja jest niezależna. Wielu programistów używa tych terminów zamiennie.

Najlepsze praktyki dotyczące funkcji

Oto kilka najlepszych praktyk, o których warto pamiętać podczas tworzenia funkcji:

Jak zawsze, używaj opisowych nazw, aby wiedzieć, co dana funkcja robi
Stosuj camelCase do łączenia słów
Skupiaj funkcje na konkretnym zadaniu

Przekazywanie informacji do funkcji

Aby funkcja była bardziej uniwersalna, często będziesz chciał przekazać do niej informacje. Jeśli weźmiemy nasz przykład displayGreeting, wyświetli on jedynie Hello, world!. Niezbyt użyteczna funkcja. Jeśli chcemy, aby była bardziej elastyczna, na przykład pozwalała określić imię osoby, którą witamy, możemy dodać parametr. Parametr (czasami nazywany również argumentem) to dodatkowa informacja przekazywana do funkcji.

Parametry są wymieniane w definicji funkcji w nawiasach i oddzielane przecinkami, jak poniżej:

function name(param, param2, param3) {

}

Możemy zaktualizować naszą funkcję displayGreeting, aby akceptowała imię i wyświetlała je.

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Kiedy chcemy wywołać naszą funkcję i przekazać parametr, podajemy go w nawiasach.

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

Wartości domyślne

Możemy uczynić naszą funkcję jeszcze bardziej elastyczną, dodając więcej parametrów. Ale co, jeśli nie chcemy wymagać podania każdej wartości? Wracając do naszego przykładu powitania, możemy pozostawić imię jako wymagane (musimy wiedzieć, kogo witamy), ale chcemy umożliwić dostosowanie samego powitania. Jeśli ktoś nie chce go dostosowywać, możemy zapewnić wartość domyślną. Aby ustawić wartość domyślną dla parametru, przypisujemy ją w podobny sposób, jak przypisujemy wartość do zmiennej - parameterName = 'defaultValue'. Oto pełny przykład:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Kiedy wywołujemy funkcję, możemy zdecydować, czy chcemy ustawić wartość dla salutation.

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Wartości zwracane

Do tej pory funkcje, które stworzyliśmy, zawsze wyświetlały wynik w konsoli. Czasami jest to dokładnie to, czego potrzebujemy, zwłaszcza gdy tworzymy funkcje, które będą wywoływać inne usługi. Ale co, jeśli chcemy stworzyć funkcję pomocniczą, która wykona obliczenie i zwróci wartość, abyśmy mogli ją wykorzystać gdzie indziej?

Możemy to zrobić, używając wartości zwracanej. Wartość zwracana jest zwracana przez funkcję i może być przechowywana w zmiennej, tak samo jak możemy przechowywać wartość literalną, taką jak ciąg znaków lub liczba.

Jeśli funkcja zwraca coś, używamy słowa kluczowego return. Słowo kluczowe return oczekuje wartości lub referencji tego, co jest zwracane, jak poniżej:

return myVariable;

Możemy stworzyć funkcję, która tworzy wiadomość powitalną i zwraca wartość do wywołującego.

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Podczas wywoływania tej funkcji przechowamy wartość w zmiennej. Jest to bardzo podobne do przypisania zmiennej wartości statycznej (np. const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

Funkcje jako parametry dla funkcji

W miarę postępów w karierze programistycznej napotkasz funkcje, które akceptują inne funkcje jako parametry. Ten sprytny trik jest często używany, gdy nie wiemy, kiedy coś się wydarzy lub zakończy, ale wiemy, że musimy wykonać operację w odpowiedzi.

Na przykład, rozważ setTimeout, który uruchamia timer i wykonuje kod po jego zakończeniu. Musimy powiedzieć mu, jaki kod chcemy wykonać. Brzmi jak idealne zadanie dla funkcji!

Jeśli uruchomisz poniższy kod, po 3 sekundach zobaczysz komunikat 3 sekundy minęły.

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Funkcje anonimowe

Przyjrzyjmy się jeszcze raz temu, co stworzyliśmy. Tworzymy funkcję z nazwą, która zostanie użyta tylko raz. W miarę jak nasza aplikacja staje się bardziej złożona, możemy zauważyć, że tworzymy wiele funkcji, które będą wywoływane tylko raz. Nie jest to idealne. Jak się okazuje, nie zawsze musimy nadawać funkcji nazwę!

Kiedy przekazujemy funkcję jako parametr, możemy pominąć jej wcześniejsze tworzenie i zamiast tego zbudować ją jako część parametru. Używamy tego samego słowa kluczowego function, ale tworzymy ją jako parametr.

Przepiszmy powyższy kod, aby użyć funkcji anonimowej:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Jeśli uruchomisz nasz nowy kod, zauważysz, że uzyskujemy te same wyniki. Stworzyliśmy funkcję, ale nie musieliśmy nadawać jej nazwy!

Funkcje strzałkowe

Jednym z uproszczeń powszechnych w wielu językach programowania (w tym w JavaScript) jest możliwość użycia tzw. funkcji strzałkowych lub grubych strzałek. Używają one specjalnego wskaźnika =>, który wygląda jak strzałka - stąd nazwa! Dzięki => możemy pominąć słowo kluczowe function.

Przepiszmy nasz kod jeszcze raz, aby użyć funkcji strzałkowej:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

Kiedy używać której strategii

Widziałeś teraz trzy sposoby przekazywania funkcji jako parametru i możesz się zastanawiać, kiedy używać którego. Jeśli wiesz, że będziesz używać funkcji więcej niż raz, stwórz ją w tradycyjny sposób. Jeśli będziesz jej używać tylko w jednym miejscu, zazwyczaj najlepiej jest użyć funkcji anonimowej. To, czy użyjesz funkcji strzałkowej, czy bardziej tradycyjnej składni function, zależy od Ciebie, ale zauważysz, że większość nowoczesnych programistów preferuje =>.

🚀 Wyzwanie

Czy potrafisz w jednym zdaniu wyjaśnić różnicę między funkcjami a metodami? Spróbuj!

Quiz po wykładzie

Przegląd i samodzielna nauka

Warto przeczytać więcej o funkcjach strzałkowych, ponieważ są one coraz częściej używane w kodzie. Poćwicz pisanie funkcji, a następnie przepisz ją, używając tej składni.

Zadanie

Zabawa z funkcjami

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.

10 KiB Raw Blame History