Kurs JavaScript – Funkcje i zasięg zmiennych

  • JavaScript
  • 4 min read
Kurs JavaScript - funkcje, return

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.

 

Wygląd funkcji

function nazwa(parametry) {
   // Ciało funkcji
   // Czyli wszystko co ma się wykonać
}

Przykład

function myjZeby() {
   alert('Myję zęby');
}

myjZeby();

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.

function myjZeby(ileCzasu) {
   alert('Myję zęby ' + ileCzasu);
}

myjZeby('15 minut');

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

Kolejny przykład – tym razem z samochodem

function jedzSamochodem(kmh, gdzie) {
   alert('Właśnie jadę samochodem ' + kmh + 'km/h, w kierunku ' + gdzie);
}

jedzSamochodem(130, 'Warszawa');

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.

function jedzSamochodem(kmh, gdzie) {
   alert('Właśnie jadę samochodem ' + kmh + 'km/h, w kierunku ' + gdzie);
   return kmh;
}

var aktualnaPredkosc = jedzSamochodem(130, 'Warszawa');
console.log(aktualnaPredkosc);

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.

 

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.

function policz(dzialanie, liczba1, liczba2) {
   var wynik = false;

   if (dzialanie === 'dodaj') {
      wynik = liczba1 + liczba2;
   } else if (dzialanie === 'odejmij') {
      wynik = liczba1 - liczba2;
   } else if (dzialanie === 'pomnoz') {
      wynik = liczba1 * liczba2;
   } else if (dzialanie === 'podziel') {
      wynik = liczba1 / liczba2;
   }
   
   return wynik;
}

console.log(policz('dodaj', 90, 150));
console.log(policz('pomnoz', 5, 10));
console.log(policz('podziel', 5, 10));

 

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:

240
50
0.5

 

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:

var globalna = 10;

function a() {
   var lokalna = 2000;
}

function b() {
   var lokalna = 999;
}

console.log(globalna);
console.log(lokalna);

W wyniku otrzymasz:

10
lokalna is not defined

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:

var globalna = 10;

function a() {
   var lokalna = 2000;
   console.log(lokalna);
}

function b() {
   var lokalna = 999;
   console.log(lokalna);
}

a();
b();

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

2000
999

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *