Javascript – funkcje

Tematem tego wpisu są funkcje. Czym one właściwie są? Moim zdaniem najlepiej porównać je do relacji szefa i pracownika. Główny skrypt jest szefem, który zleca pracownikowi (funkcji) pewne zadanie do wykonania i oczekuje rezultatu. Zapraszam do zapoznania się zarówno z poniższym artykułem jak i z wpisem z serii teoria programowania poświęconym funkcjom.

W javascript’cie funkcje możemy deklarować na kilka sposobów. Pierwszym z nich jest użycie słowa function po którym podajemy nazwę i nawiasy okrągłe. poniżej deklaracji umieszczamy nawiasy klamrowe wyznaczające jej zakres. Na przykład

<script>
  function wypisz()
  {
      document.write("Hello World");
  }  
</script>

Każda funkcja może przyjąć parametry, czyli wartości w oparciu o które się wykona. W deklaracji funkcji umieszczamy wówczas nazwy jakie przyjmą przekazane parametry. Podczas wywoływania funkcji natomiast w nawiasie umieszczamy argument czyli wartość parametru. Oto przykład

<script>
  let a = 4;
  let b = 4;

  function sumuj(l1,l2)
  {
      return a + b;
  }

  let suma = sumuj(a,b)
</script>

W powyższym przykładzie zastosowałem słowo kluczowe return. Sprawia ono że podana za nim wartość może zostać przypisana do zmiennej. Tak jak wynik wykonania funkcji sumuj został przypisany zmiennej suma.

Funkcję możemy przypisać do zmiennej, a wówczas wystarczy nazwę zmiennej zakończyć nawiasami, a uzyskamy wywołanie. Wygląda to tak:

<script>
  const funkcja = function(parametr) {
      document.write(parametr);
  }

  funkcja("Hello World");  
</script>

Wraz z wersją ES2016 do JS’a zawitał nowy sposób deklarowania funkcji czyli tzw. arrow functions. W oparciu o nie działa obecnie spora cześć innych funkcji i metod. Wygląda to tak:

<script>
  const funkcja = (parametr) => {
      console.log(parametr);
  }

  funkcja("Hello World");
</script>

Możemy też użyć zapisu alternatywnego:

<script>
  let funkcja = el => console.log(el);
  funkcja('Hello world');
</script>

Dla podstawowych zastosowań nie ma zbytniej różnicy między tymi zapisami. Jednak im dalej w las tym ciemniej. Na wyższym poziomie, gdy poznamy tzw. konteksty, albo zaczniemy zwracać uwagę na kolejność ładowania elementów do pamięci okaże się, że te zapisy są odmienne.

Jednak zanim to nastąpi, możemy przejść do jeszcze jednej rzeczy związanej z funkcjami w JS’ie. Otóż funkcja może otrzymać inną funkcję jako argument. Jest to ciekawy zabieg, dzięki któremu w JS’ie łatwiej pracuje się z asynchronicznością (temat na zupełnie inny wpis).

Sebastian Nosal

Ostatnio zaktualizowane: 20 października 2022

Egzamin EE.09, Egzamin INF.03, JavaScript