Uwaga! Trwają prace nad nową wersją serwisu. Mogą występować przejściowe problemy z jego funkcjonowaniem. Przepraszam za niedogodności!
🏆 Lubisz podcast Pierwsze kroki w IT? Oddaj swój głos w rankingu: TOP 10 polskich podcastów o IT! 🏆
Deklaracja funkcji i jej wywołanie dla początkującego programisty mogą wyglądać podobnie. Ten artykuł wyjaśnia podstawowe pojęcia z tego zakresu, a także omawia kwestię zwracania wartości przez funkcję z pomocą słowa return oraz wykorzystania console.log().
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.
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:
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.
Jak wygląda wywołanie funkcji? Tu mamy mniej elementów, lecz nadal trzymamy się konkretnego zapisu. Aby uruchomić funkcję, należy zawrzeć:
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 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)
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 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
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.
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.
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.
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ę.
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"))
Udostępnij ten artykuł: