Funkcje to bloki kodu, które pozwalają Ci zorganizować cały kod i podzielić go na wykonywane czynności (funkcje).

Taka funkcja może przyjmować różne parametry, które potem możesz sprawdzać w jej wnętrzu. Możesz ją wywołać w (prawie) dowolnym miejscu i dowolnym czasie.

Wersja wideo:

Kurs JavaScript 6/10 - Funkcje i zasięg zmiennych 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

Wygląd funkcji

Przykład

W wyniku otrzymamy komunikat „Myję zęby”.

Przyjmowanie parametrów

Funkcje bez parametrów byłyby bardzo ograniczone. Parametry podajemy w nawiasach zaraz za nazwą funkcji.

W wyniku otrzymamy „Myję zęby 15 minut”.

Kolejny przykład – tym razem z samochodem

W wyniku otrzymamy „Właśnie jadę samochodem 130km/h, w kierunku Warszawa”;

 

Słowo kluczowe return – zwracanie wartości

Jak na razie powyższe funkcje wyświetlają tylko napisy. Możesz jednak wstawić wartość zwracaną przez funkcję do jakiejś zmiennej, żeby potem wykonywać na niej działania.

W momencie gdy wyświetlisz zmienną „aktualnaPredkosc”, dostaniesz wynik 130.

Dzieje się tak, bo kończąc naszą funkcję użyliśmy instrukcji „return”, by przekazać jakąś wartość na zewnątrz.

Dzięki temu możemy teraz używać tej wartości poza funkcją – wyświetlać ją, dodawać, odejmować itd.

 

Kurs JavaScript 6/10 - Funkcje i zasięg zmiennych 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

 

Projekt: mini kalkulator

Znając zasadę działania funkcji i przyjmowania parametrów, możemy teraz zrobić mini projekt – prosty kalkulator – który pozwoli liczyć dwie podane liczby.

 

Krok po kroku jak działa ten kod:

  1. Tworzymy funkcję „policz”, która przyjmuje 3 parametry:
    1. Działanie – w formie słownej, czyli dodaj, odejmij, pomnóż lub podziel – bez polskich znaków
    2. Pierwszą liczbę
    3. Drugą liczbę
  2. Wewnątrz niej od razu tworzymy zmienną wynik i ustawiamy ją domyślnie na false. Jeżeli coś pójdzie nie tak, przynajmniej dostaniemy wartość false zamiast błędu lub undefined
  3. Krok po kroku, za pomocą instrukcji warunkowych sprawdzamy jakie działanie zostało wpisane w pierwszym parametrze, i wtedy odpowiednio liczymy wynik
  4. Gdy wynik będzie już gotowy, za pomocą return zwracamy go poza funkcję, by można było dalej na nim działać

Na samym końcu wypisujemy w konsoli 3 wyniki, które będą wyglądały następująco:

 

Zasięg lokalny i globalny

Tworząc zmienne zawsze używaj słowa var z przodu, a najlepiej twórz zmienne tylko w funkcjach – kiedy tylko możesz.

Takie podejście pozwoli Ci uniknąć wielu niespodzianek, a jednocześnie pozwoli stosować takie same nazwy zmiennych w różnych funkcjach.

Bo takie zmienne się nie widzą – gdy tworzysz je w funkcjach, są lokalne.

Czas na przykład, który zobrazuje Ci jak wygląda zasięg zmiennych:

W wyniku otrzymasz:

Jak widzisz zmienna lokalna jest widoczna tylko wewnątrz funkcji, nie na zewnątrz.

Dopiero gdy zechcesz wyświetlić zmienne prosto z wnętrza funkcji, wtedy one będą widoczne:

Więc tym razem otrzymasz wartości zmiennych lokalnych:

Kurs JavaScript 6/10 - Funkcje i zasięg zmiennych 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

>