Deklaracja i wywołanie funkcji w JavaScript

 Do czego służą funkcje w JavaScript

Funkcje zawierają instrukcje, dzięki którym nasz program działa. W przeciwnym razie byłby on zbiorem wartości, z którymi nic nie możemy zrobić. Gdy uruchamiamy (wywołujemy) funkcję, mówimy interpreterowi JavaScriptu „zrób to i to zgodnie z podaną instrukcją”.

Poniżej wyjaśniam pojęcie deklaracji funkcji oraz jej wywołania. Omawiam również, co dzieje się, gdy funkcja zwraca wartość oraz co w tym wszystkim robi console.log().

Uwaga: w przykładach posługuję się kodem „pieczenia ciasta”, którego nie musisz uruchamić. Lepiej, abyś skupił się na różnicach w zapisie. Na końcu dla usystematyzowania wiadomości pokazuję przykład na prawdziwym kodzie.

 Deklaracja funkcji

Uwaga: nie omawiam tu funkcji strzałkowej i anonimowej oraz wyrażenia funkcyjnego. Gdyby napisać program, który nie zawiera żadnej z tych trzech rzeczy, nadal działałby tak samo – zatem najpierw poznajmy podstawy!

Deklaracja funkcji to zapisane w określonej formie polecenie dla interpretera. Ma więc stałe elementy, takie jak:

• słowo kluczowe function
• nazwa funkcji (dowolna, choć dobrze, by jak najlepiej oddawała rolę funkcji)
• nawiasy okrągłe
• parametr lub parametry (nieobowiązkowo) wewnątrz nawiasów okrągłych
• nawiasy klamrowe
• ciało funkcji wewnątrz nawiasów klamrowych – czyli „instrukcja”.

Deklaracja funkcji sama w sobie nic nie robi. Gdy ją tworzymy, jest jak kartka z przepisem – widzimy ją, ale samo patrzenie nie spowoduje, że nagle dostaniemy upieczone ciasto.

// to tylko „przepis na ciasto”, program nie wykona żadnego zadania
function bake() {
    const dough = "flour" + "water"
    return dough
}

Aby instrukcja zawarta w funkcji została wykonana, musimy tę funkcję wywołać. Porównanie deklaracji i wywołania znajdziesz w formie grafiki pod omówieniem wywołania.

 Wywołanie funkcji czyli uruchomienie funkcji

Jak wygląda wywołanie funkcji? Tu mamy mniej elementów, lecz nadal trzymamy się konkretnego zapisu. Aby uruchomić funkcję, należy zawrzeć:

• nazwę funkcji
• nawiasy okrągłe
• argument lub argumenty (nieobowiązkowo) wewnątrz nawiasów okrągłych.

Wywołanie funkcji daje nam już konkretny efekt. To tak, jakbyśmy krok po kroku wykonywali polecenia z przepisu i w końcu upiekli ciasto.

// deklaracja, czyli „instrukcja pieczenia” pozostaje bez zmian
function bake() {
    const dough = "flour" + "water"
    return dough
}

// w ten sposób każemy programowi upiec ciasto
bake()

Poniższa grafika przedstawia zapis deklaracji funkcji i jej wywołania. Zwróć uwagę, że przy wywołaniu nie ma już słowa function ani ciała funkcji. Stosujemy też argumenty, a nie parametry – o nich przeczytasz na końcu.

 Funkcja, która zwraca daną wartość

Funkcja może zwracać wartość, którą wykorzystamy w innym miejscu programu. Abyśmy do takiej wartości mieli dostęp, powinniśmy zapisać ją do zmiennej. Nie w każdej sytuacji musimy to robić, lecz o tym za chwilę.

Funkcja, która zwraca wartość, musi zawierać słowo kluczowe return. Na nim interpreter kończy odczytywanie instrukcji, zatem nie wykona się żaden kod, który umieścimy pod linią z return.

// jak widzisz, nasza funkcja piecząca zwraca ciasto
function bake() {
    const dough = "flour" + "water"
    return dough
}
// zwróconą przez funkcję wartość zapisujemy do zmiennej
const cake = bake()

// teraz możemy tę wartość wykorzystać gdzieś, gdzie jest potrzebna

Jak wspomniałem wyżej, wartość zwracaną przez funkcję możemy wykorzystać bezpośrednio w kodzie (bez zapisywania jej do zmiennej). Przykładowo poniżej wyświetlamy użytkownikowi alert z nazwą zamówionego ciasta.

// deklaracja funkcji
function bake() {
    const dough = "flour" + "water"
    return dough
}

// wywołanie funkcji bezpośrednio w miejscu, w którym potrzebujemy zwracanej przez nią wartości
alert("Congrats, here is:", bake())

Oczywiście jeśli chcemy lub potrzebujemy, możemy wartość z powyższego przykładu zapisać do zmiennej, jak wcześniej:

// deklaracja funkcji
function bake() {
    const dough = "flour" + "water"
    return dough
}
// zapisanie zwracanej wartości do zmiennej
const cake = bake()

// wyświetlenie alertu z wartością ze zmiennej cake
alert("Congrats, here is your:", cake)

 Nie myl zwracania wartości z console.log()

Podczas nauki często wykorzystujemy console.log(), by móc szybko wyświetlić wynik działania kodu. Nie oznacza to jednak, że funkcja zwraca wartość, którą widzimy w konsoli. Póki nie ma słowa kluczowego return, póty funkcja będzie zwracać undefined.

// deklaracja funkcji
function bake() {
    const dough = "flour" + "water"
    console.log(dough)
}
// zapisanie zwracanej wartości do zmiennej
const cake = bake()

// wyświetlenie alertu z wartością ze zmiennej cake
alert("Congrats, here is your:", cake)

// Efekt? Alert -> Congrats, here is: undefined

Po co więc jest console.log()? Dzięki niemu jesteśmy w stanie szybko zweryfikować, czy nasz kod działa zgodnie z oczekiwaniami. Zazwyczaj więc będziesz używać go właśnie do weryfikowania różnych wartości i do debugowania.

 Funkcja bez słowa kluczowego return

Funkcja może coś robić bez zwracania wybranej przez nas wartości. Nie używamy wówczas słowa kluczowego return jak wyżej. Ściśle rzecz biorąc: jeśli nie ma return, to zwracane jest undefined, ale na co dzień spotkasz się z określeniem „funkcja niczego nie zwraca”. To tak, jakbyśmy nie piekli ciasta (czyli nie „zwracalibyśmy wartości” w postaci wypieku), lecz na przykład dokonywali aktualizacji liczby przepisów w zeszycie. Niczego nie zwracamy, ale wykonujemy akcję.

// dane o liczbie przepisów
let currentRecipesAmount = 20;

// deklaracja funkcji z parametrem
function updateRecipesAmount(newRecipesAmount) {
    currentRecipesAmount = currentRecipesAmount + newRecipesAmount
}
// wywołanie funkcji z argumentem (zwiększamy liczbę przepisów np. o 2)
updateRecipesAmount(2)

// w wyniku działania programu od teraz mamy 22 przepisy

 Czym różnią się parametry od argumentów

Jeżeli odróżniasz już deklarację funkcji (nasza kartka z przepisem na ciasto) od wykonania funkcji (upieczenie ciasta / aktualizacja liczby przepisów w zeszycie), to łatwo Ci przyjdzie rozróżnienie nazw parametrów i argumentów.

• Parametry to nazwa zarezerwowana dla miejsca deklaracji funkcji. Można powiedzieć, że są to atrapy (placeholdery), które dopiero w momencie użycia funkcji zastąpimy prawdziwymi wartościami.
• Argumenty to nazwa, którą stosujemy w miejscu wywołania funkcji (czyli w miejscu jej użycia). To podstawiane w miejsce parametrów realne wartości, na których chcemy wykonać jakieś operacje.

Nasza funkcja do pieczenia mogłaby w parametrze przyjmować np. mąkę – dzięki temu decydowalibyśmy o rodzaju wykorzystywanej mąki przy każdym uruchomieniu tej funkcji. W ten sposób zyskalibyśmy bardziej elastyczne rozwiązanie.

// deklaracja funkcji z parametrem
function bake(flour) {
    const dough = flour + "water"
    return dough
}

// wywołanie funkcji z różnymi argumentami ->

// uzyskujemy ciasto razowe
bake("wholemealFlour")

// uzyskujemy ciasto białe
bake("whiteFlour")

Dodatkowe przykłady z kodem i wyjaśnienia znajdziesz w innym moim artykule w podpunkcie Argumenty i parametry funkcji w JavaScripcie.

 Przykład deklaracji i wywołania funkcji na prawdziwym kodzie

Nie będziemy stosować tu eventów i elementów DOM, ponieważ na etapie nauki funkcji, możesz jeszcze ich nie znać. Ograniczymy się więc do prostego przykładu gry słownej.

 Deklaracja funkcji

Chcemy podawać pierwszą i ostatnią literę oraz liczbę znaków w słowie. Deklaracja funkcji mogłaby wyglądać tak:

function guessWord(word) {
    const lettersAmount = word.length
    // zwracamy ciąg znaków (zagadkę)
    return "First letter is: " + word[0] + ", last letter is: " + word[lettersAmount - 1] + " and this word has " + lettersAmount + " letters."
}

Powyższa deklaracja funkcji jest jak miniprogram, który możemy uruchomić w dowolnym miejscu naszego kodu (tak jak przepis na ciasto możemy wykorzystać np. w dowolnej kuchni).

Zauważ, że to rozwiązanie jest dodatkowo elastyczne: do tak stworzonej funkcji możemy przekazać jakiekolwiek słowo, a zagadka zawsze będzie poprawna. Żeby się jednak o tym przekonać, musimy wywołać funkcję.

 Wywołanie funkcji

Przy wywołaniu funkcji (jeśli przyjmuje ona jakiekolwiek parametry) podajemy już konkretne argumenty. Przykłady kilku wywołań z różnymi słowami znajdziesz poniżej.

guessWord("lamp");
guessWord("fish");
guessWord("girl")

Uruchom powyższy kod u siebie: deklarację i trzy wywołania. Czy coś się wydarzyło? Nie, zapewne nie widzisz żadnego efektu, ponieważ nigdzie nie wyświetlamy zwróconej przez funkcję wartości.

W przypadku gry tekst zagadki pojawiłby się użytkownikowi w przeglądarce. Jeżeli umiesz tworzyć elementy DOM, możesz spróbować to zaimplementować. Jeśli nie, to skorzystamy z console.log(), ale poza funkcją – aby nie myliło się ono ze słówkiem return.

Ponieważ nasza funkcja zwraca ciąg znaków (treść zagadki), możemy albo zapisać tę wartość do zmiennej i potem wyświetlić w konsoli, albo od razu wywołać funkcję wewnątrz console.log(). Oba przypadki zobaczysz poniżej:

// wartość zwracaną przez funkcję zapisuję do zmiennej i dopiero potem wyświetlam w konsoli
const riddle = guessWord("cat");
console.log(riddle)

// wartość zwracaną przez funkcję od razu wyświetlam w konsoli
console.log(guessWord("dog"))

 Podsumowanie

• Deklaracja to „instrukcja” – może być elastyczna, reużywalna, wykorzystywana w różnych miejscach programu. Sama w sobie nic nie robi, póki jej nie wywołamy.
• Wywołanie funkcji występuje tam, gdzie potrzebujemy zwracanej przez tę funkcję wartości lub konkretnej operacji (pamiętasz bowiem, że funkcja nie musi posiadać słówka return, czyli zwracać wartości).
• Jeśli funkcja posiada parametry, to przy jej wywołaniu w miejsce parametrów wstawiamy argumenty, czyli konkretne wartości, na których funkcja wykona jakieś operacje.