chevron-left chevron-right

Piotr Nalepa Frontend, architektura i AI

[JS] Kilka słów o parametrach w funkcjach JavaScript

Ta wersja
blog.piotrnalepa.pl/2014/01/24/js-kilka-slow-o-parametrach-w-funkcjach-javascript
Opublikowano
Autor
, Staff Software Engineer
Kategoria
JavaScript
Uwagi
Napisz do mnie · Napisz na X

Ten wpis ma 12 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

Dzisiejszy wpis będzie poświęcony temu jak funkcje Javascript obsługują parametry, które są do nich przekazywane. Jest to przydatna wiedza, a na pewno dla bardziej zaawansowanych programistów będzie to wiedza już znana.

Jak wiadomo, funkcje w każdym języku programowanie mogą przyjmować parametry. W języku Javascript ich obsługa się nieco różnić od sposobów ich przekazywania w takich językach jak C++ czy C#.

Sekcja 1Przekazywanie parametrów do funkcji

Do funkcji możemy przekazać tyle parametrów ile chcemy, niezależnie od tego ile jest przez nich obsługiwanych. Jeśli wymagane parametry nie zostaną przekazane, to funkcja będzie zwracać wartość undefined dla potrzebnego parametru. W ten sposób można łatwo zakłócić pracę funkcji a przez to całej aplikacji JS, jeśli programista nie pomyślał o obsłudze błędnej ilości parametrów.

Załóżmy, że funkcja z parametrami wygląda następująco:

Przykład 1JavaScript
1
2
3
4
var jakasFunkcja = function (param1, param2) {
  console.log('Parametr 1:', param1);
  console.log('Parametr 2:', param2);
}

Tak zdefiniowaną funckję możemy wywołać na kilka sposobów:

Przykład 2JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
jakasFunkcja();
// Parametr 1: undefined
// Parametr 2: undefined
 
jakasFunkcja(1);
// Parametr 1: 
// Parametr 2: undefined
 
jakasFunkcja(1, 2);
// Parametr 1: 1
// Parametr 2: 2
 
jakasFunkcja(1, 2, 3);
// Parametr 1: 1
// Parametr 2: 2

Jak można zauważyć, za pierwszym razem wywołaliśmy funkcję bez parametrów i każdy parametr wymagany został zdefiniowany jako undefined. W drugim przypadku, wywołaliśmy funkcję z jednym parametrem. Dlatego tylko parametr drugi jest undefined. W kolejnym przypadku obydwa parametry zostały przekazane i mają określoną wartość. Ostatni przypadek jest jednak najciekawszy, ponieważ przekazujemy do funkcji 3 parametry i pierwsze 2 są poprawnie zdefiniowane, a trzeci jest ignorowany. Mimo to, w dalszym ciągu mamy dostęp do trzeciego parametru z funkcji dzięki parametrowi arguments, który przechowuje informacje o wszystkich parametrach przekazanych do funkcji. Do parametrów możemy się dostać w następujący sposób:

Przykład 3JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var innaFunkcja = function () {
  // za pomocą pętli dostajemy się do każdego parametru przekazanego w funkcji
  for (var i = 0; i < arguments.length; i++) {
    console.log(i, ' - Parametr', arguments[i]);
  }
};
 
innaFunkcja(1, 2, 3, 4, 5);
 
// 0 - Parametr 1
// 1 - Parametr 2
// 2 - Parametr 3
// 3 - Parametr 4
// 4 - Parametr 5

Należy pamiętać, że parametru arguments nie nadpisywać w ciele funkcji, jeśli chcemy móc skorzystać ze wszystkich niezdefiniowanych parametrów w danej funkcji.

Sekcja 2Definiowanie wartości domyślnej dla parametrów

W chwili obecnej, pisząc kod w JS nie możemy definiować wartości domyślnych dla parametrów funkcji tak jak to ma miejsce chociażby w kodzie PHP. Czyli nie jesteśmy w stanie pisać kodu w następujący sposób:

Przykład 4JavaScript
1
var kolejnaFunkcja = function (a, b = 2) {};

Jesteśmy w stanie jednak zdefiniować wartość domyślną dla funkcji, tylko trochę inaczej niż ma to miejsce w PHP. Robimy to w następujący sposób:

Przykład 5JavaScript
1
2
3
4
var kolejnaFunkcja = function (a, b) {
  a = a || 1;
  b = b || 2;
};

W powyższym kodzie, wewnątrz funkcji sprawdzamy czy parametr zwraca jakąkolwiek wartość, a jeśli nie to przypisujemy mu domyślną wartość. Tym samym uzyskujemy funkcjonalność ustawiania wartości domyślnej dla parametrów funkcji.

Co ciekawe, wraz z coraz większym rozpowszechnianiem standardu ECMAScript 6 za jakiś czas będzie można zacząć korzystać z tego pierwszego, niepoprawnego zapisu i będzie on poprawnie obsługiwany.

Sekcja 3Podsumowanie

Ten artykuł miał na celu przedstawić sposoby obsługi parametrów w funkcjach Javascript. Jest to prosta do stosowania wiedza, ale bardzo użyteczna i sprawdza się w wielu przypadkach. Sam korzystam z niej na co dzień i mam nadzieję, że Tobie też się przyda tego typu wiedza.

Udostępnij
Uwagi

O autorze

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!