Funkcje w JavaScripcie: deklaracje, parametry i arrow functions

W poprzednim rozdziale zobaczyliśmy, jak sterować wykonaniem kodu za pomocą pętli i instrukcji sterujących. W tej części kursu zajmiemy się kolejnym ważnym elementem JavaScriptu: funkcjami.

Funkcje to bloki kodu, które uruchamiasz, kiedy chcesz. Pozwalają zdefiniować jedno zadanie i wykonać je wiele razy bez przepisywania kodu. Dzięki temu kod jest krótszy i łatwiejszy w utrzymaniu: opisujesz zadanie raz, a używasz go w wielu miejscach.

Oto elementy, o których trzeba pamiętać przy pisaniu funkcji w JavaScripcie:

• Deklarowanie funkcji
• Argumenty i parametry
• Wartość zwracana przez funkcję
• Funkcje strzałkowe

Deklarowanie funkcji

Funkcję w JavaScripcie zadeklarujesz na dwa sposoby: przez deklarację funkcji albo przez wyrażenie funkcyjne.

Deklaracja funkcji

function maFonction() {
  // kod do wykonania
}

Wyrażenie funkcyjne

const maFonction = function() {
  // kod do wykonania
}

Argumenty i parametry

Argumenty to wartości przekazywane funkcji przy jej wywołaniu. Parametry to zmienne zdefiniowane w deklaracji funkcji, którym te argumenty odpowiadają.

Oto przykład funkcji z jednym argumentem i jednym parametrem:

function maFonction(parametre) {
  console.log(parametre);
}

maFonction('Bonjour'); // wyświetla w konsoli 'Bonjour'

Wartość zwracana przez funkcję

Funkcja może zwrócić wartość instrukcją „return”. Jeśli funkcja nie zwraca żadnej wartości, przyjmuje się, że zwraca „undefined”.

function maFonction() {
  return 'Bonjour';
}

console.log(maFonction()); // wyświetla w konsoli 'Bonjour'

Możesz też zwrócić z funkcji kilka wartości naraz, pakując je w obiekt albo w tablicę:

function maFonction() {
  return {
    message: 'Bonjour',
    nombre: 42
  };
}

console.log(maFonction());
// wyświetla w konsoli { message: 'Bonjour', nombre: 42 }

function maFonction() {
  return [1, 2, 3];
}

console.log(maFonction()); // wyświetla w konsoli [1, 2, 3]

Instrukcja „return” natychmiast przerywa funkcję, więc kod zapisany po niej nie zostanie wykonany. Widać to na poniższym przykładzie:

function maFonction() {
  return 'Bonjour';
  console.log('Ce message ne sera jamais affiché');
}

console.log(maFonction()); // wyświetla w konsoli 'Bonjour'

Funkcje strzałkowe

Funkcje strzałkowe (po angielsku „arrow functions”) to zwięźlejsza składnia zapisu funkcji w JavaScripcie. Sprawdzają się zwłaszcza wtedy, gdy piszesz prostą funkcję, która nie potrzebuje pełnego ciała.

const maFonction = () => {
  // kod do wykonania
};

Jeśli ciało funkcji mieści się w jednym wyrażeniu, możesz pominąć klamry i słowo kluczowe return: zwracana jest wartość wyrażenia. Nawiasy pozostają natomiast obowiązkowe, gdy funkcja nie ma żadnego parametru:

const maFonction = () => console.log('Bonjour');

Podsumowanie

Funkcje to jeden z filarów JavaScriptu i podstawa skutecznego, łatwego w utrzymaniu kodu. Gdy opanujesz deklarowanie funkcji, argumenty i parametry, wartość zwracaną oraz funkcje strzałkowe, zbudujesz w swoich aplikacjach naprawdę użyteczne funkcje.

W następnym rozdziale zajmiemy się kolejnym ważnym pojęciem JavaScriptu: obiektami. Zobaczymy, jak je tworzyć i jak przechowywać oraz porządkować w nich dane w kodzie.