Deklarowanie funkcji w JavaScript

Funkcje w JavaScript służą do grupowania instrukcji, które wykonują określone zadanie. Dzięki nim można wielokrotnie używać tego samego kodu, co ułatwia jego organizację i ogranicza powtarzanie.

Deklaracja funkcji - podstawowa składnia

Funkcję można zadeklarować za pomocą słowa kluczowego function, po którym następuje nazwa funkcji, nawiasy (z ewentualnymi parametrami) i blok kodu w klamrach {}.

function przywitaj() {
  console.log("Witaj w JavaScript!");
}

Aby funkcję uruchomić, należy ją wywołać:

przywitaj(); // Witaj w JavaScript!

Funkcje z parametrami

Funkcja może przyjmować parametry, czyli dane wejściowe, które można potem wykorzystać w jej wnętrzu.

function powitajUzytkownika(imie) {
  console.log("Witaj, " + imie + "!");
}

powitajUzytkownika("Ania"); // Witaj, Ania!

Funkcje zwracające wartość

Funkcja może zwracać wynik za pomocą słowa kluczowego return.
Taki wynik można przypisać do zmiennej lub wykorzystać w dalszych obliczeniach.

function dodaj(a, b) {
  return a + b;
}

let suma = dodaj(5, 3);
console.log("Suma wynosi: " + suma); // Suma wynosi: 8

Dlaczego warto używać funkcji

• pozwalają uporządkować kod i unikać jego powielania,

• umożliwiają podział programu na mniejsze części,

• ułatwiają ponowne wykorzystanie kodu w różnych miejscach,

• zwiększają czytelność i przejrzystość programu.

Przykłady zastosowań funkcji

1. Obsługa zdarzenia w przeglądarce

function klikniecie() {
  alert("Kliknięto przycisk!");
}

W HTML:

<button onclick="klikniecie()">Kliknij mnie</button>

2. Obliczanie pola prostokąta

function poleProstokata(a, b) {
  return a * b;
}

console.log(poleProstokata(4, 6)); // 24

3. Sprawdzanie pełnoletności

function czyPelnoletni(wiek) {
  if (wiek >= 18) {
    return "Osoba jest pełnoletnia";
  } else {
    return "Osoba nie jest pełnoletnia";
  }
}

console.log(czyPelnoletni(16)); // Osoba nie jest pełnoletnia

Funkcje anonimowe i strzałkowe w JavaScript

Funkcje anonimowe

Funkcja anonimowa to funkcja bez nazwy.
Zazwyczaj jest przypisywana do zmiennej lub używana jako argument w innej funkcji.
Nie można jej wywołać po nazwie (bo jej nie ma), ale można ją uruchomić przez zmienną, w której została zapisana.

Przykład 1 - funkcja anonimowa przypisana do zmiennej:

const przywitaj = function() {
  alert("Cześć! To funkcja anonimowa.");
};

przywitaj(); // wywołanie funkcji

Przykład 2 - funkcja anonimowa jako argument:

setTimeout(function() {
  console.log("Ten komunikat pojawi się po 2 sekundach");
}, 2000);

Tutaj funkcja anonimowa jest przekazana do setTimeout() - zostanie wykonana po upływie określonego czasu.

Funkcje strzałkowe (arrow functions)

Funkcje strzałkowe to nowoczesny i skrócony zapis funkcji anonimowych, wprowadzony w standardzie ES6 (ECMAScript 2015).
Zamiast słowa kluczowego function, używamy „=>” (strzałki).

Składnia:

const nazwa = (parametry) => {
  // ciało funkcji
};

Przykład 1 - funkcja strzałkowa bez parametrów:

const pokaz = () => console.log("Witaj w funkcji strzałkowej!");
pokaz();

Przykład 2 - funkcja strzałkowa z jednym parametrem:

const przywitaj = (imie) => console.log("Cześć, " + imie + "!");
przywitaj("Ania");

Przykład 3 - funkcja strzałkowa z obliczeniem:

const dodaj = (a, b) => a + b;
console.log(dodaj(5, 3)); // wynik: 8

Zastosowania funkcji anonimowych i strzałkowych

Funkcje anonimowe i strzałkowe są bardzo często używane w:

1. Obsłudze zdarzeń (events) w HTML:

document.getElementById("przycisk").addEventListener("click", () => {
  alert("Kliknięto przycisk!");
});

2. Funkcjach wbudowanych do przetwarzania tablic:

const liczby = [1, 2, 3, 4];
const podwojone = liczby.map(x => x * 2);
console.log(podwojone); // [2, 4, 6, 8]

3. Opóźnionym wykonywaniu kodu (np. setTimeout, setInterval):

setTimeout(() => console.log("Minęły 3 sekundy"), 3000);

Zadania - Funkcje w JS

Zadanie 1 - Obliczanie pola prostokąta (deklarowanie funkcji)

Napisz program, który obliczy pole prostokąta na podstawie długości i szerokości podanej przez użytkownika.

• Utwórz plik HTML z przyciskiem.

• Po kliknięciu przycisku poproś użytkownika o podanie długości i szerokości prostokąta (prompt() lub z pola <input>).

• Napisz funkcję obliczPole(), która przyjmuje dwa parametry: długość i szerokość.

• Funkcja powinna obliczyć pole i wyświetlić wynik w alert().

• Wywołaj funkcję po kliknięciu przycisku.

Wynik działania programu:

Podaj długość: 5  
Podaj szerokość: 3  
Pole prostokąta wynosi: 15

Zadanie 2 - Obliczanie średniej liczb (parametry i zwracanie wartości)

Napisz program, który obliczy średnią z trzech liczb podanych przez użytkownika.

• Utwórz funkcję srednia(a, b, c), która przyjmuje trzy liczby jako parametry.

• Funkcja powinna zwracać wynik (nie wyświetlać).

• Po wywołaniu funkcji wyświetl wynik w alert().

• Użyj parseFloat() do konwersji danych z prompt() na liczby.

Wynik działania programu:

Podaj pierwszą liczbę: 4  
Podaj drugą liczbę: 6  
Podaj trzecią liczbę: 8  
Średnia wynosi: 6

Zadanie 3 - Przyciski z funkcjami anonimowymi i strzałkowymi

Napisz stronę, na której po kliknięciu dwóch różnych przycisków wyświetlą się różne komunikaty – jeden przy użyciu funkcji anonimowej, a drugi przy użyciu funkcji strzałkowej.

• Utwórz dwa przyciski w HTML (<button>).

• Do pierwszego przycisku dodaj zdarzenie onclick, które wywoła funkcję anonimową z alert("To funkcja anonimowa!").

• Do drugiego przycisku dodaj zdarzenie z funkcją strzałkową, która wyświetli alert("To funkcja strzałkowa!").

• Użyj addEventListener() do przypisania funkcji do przycisków.

Wynik działania programu:
Po kliknięciu przycisków pojawiają się komunikaty:

To funkcja anonimowa!
To funkcja strzałkowa!

Zadanie 4 - Funkcja zwracająca tekst z wynikiem (zwracanie wartości)

Napisz funkcję, która sprawdzi, czy liczba podana przez użytkownika jest parzysta czy nieparzysta, i zwróci odpowiedni komunikat.

• Utwórz funkcję sprawdzLiczbe(liczba), która przyjmuje jedną liczbę jako parametr.

• Wewnątrz funkcji użyj instrukcji if...else, aby sprawdzić, czy liczba jest parzysta (liczba % 2 === 0).

• Funkcja powinna zwracać napis (np. "Liczba jest parzysta").

• Wyświetl zwrócony tekst w alert().

Wynik działania programu:

Podaj liczbę: 7  
Liczba jest nieparzysta.

Zadanie 5 - Funkcja wywołująca inną funkcję (funkcje zagnieżdżone)

Napisz program, w którym jedna funkcja wywołuje inną funkcję w celu wykonania obliczeń.

• Utwórz funkcję pomnoz(a, b), która zwraca wynik mnożenia dwóch liczb.

• Utwórz funkcję wyswietlWynik(), która pobiera dane od użytkownika (prompt() lub z pola <input>), wywołuje funkcję pomnoz() i wyświetla wynik w alert().

• Po kliknięciu przycisku uruchom wyswietlWynik().

Wynik działania programu:

Podaj pierwszą liczbę: 4  
Podaj drugą liczbę: 5  
Wynik mnożenia: 20

Zadanie 6 - Przekazywanie funkcji jako argumentu (funkcje anonimowe i strzałkowe)

Napisz program, który wykona operację matematyczną przekazaną jako funkcja.

• Utwórz funkcję wykonajOperacje(a, b, operacja), która przyjmuje dwie liczby i funkcję.

• Wewnątrz wykonajOperacje wywołaj przekazaną funkcję z argumentami a i b i zwróć wynik.

• Zdefiniuj dwie funkcje strzałkowe:

  • dodaj = (x, y) => x + y

  • odejmij = (x, y) => x - y

• Użyj console.log(), aby wyświetlić wyniki działania programu.

Wynik działania programu:

Wynik dodawania: 15  
Wynik odejmowania: 5