W JavaScript wszystkie argumenty funkcji, które nie zostały do niej przekazane w parametrach podczas wywołania są automatycznie ustawiane na undefined
. Czasami jednak potrzebujemy przypisać jakąś konkretną domyślną wartość do argumentu. Dotychczas, aby to zrobić, trzeba było nieco pokombinować. Na szczęście zauważyli to twórcy języka i w ES6 postanowiono przekazać nam do tego celu specjaną konstrukcję składnowią.
Przypomnijmy sobie najpierw, jak to wyglądało dotychczas. Mając funkcję, na przykład taką:
function add(a, b) {
return a + b;
}
add(3, 4); //7
możemy uznać, że tak często używamy jej do dodawania liczby 4, że nie chce nam się tego robić za każdym razem i chcemy mieć możliwość pominięcia jej przy wywoływaniu funkcji. Najprostszym na to sposobem było dotychczas sprawdzenie, czy b
jest undefined
i przypisanie mu wtedy domyślnej wartości:
function add(a, b) {
b = typeof b !== 'undefined' ? b : 4;
return a + b;
}
add(3, 4); //7
add(3); //7
Nie jest to rozwiązanie szczególnie eleganckie, gdyż przypisuje nową wartość do argumentu, co jest uznawane za złą praktykę. Bardziej poprawnym rozwiązaniem byłoby więc coś takiego:
function add(a, b) {
const realB = typeof b !== 'undefined' ? b : 4;
return a + realB;
}
add(3, 4); //7
add(3); //7
... ale tu z kolei tworzymy dodatkową zmienną(stałą), która nie powinna być przecież wcale potrzebna. Jak więc nie tworzyć nadmiarowych zmiennych i być w zgodzie z dobrymi praktykami? Wystarczy wykorzystać domyślne parametry funkcji dostępne w ES6:
function add(a, b = 4) {
return a + b;
}
add(3, 4); //7
add(3); //7
Prościej już się nie da! Oczywiście przypisywać możemy nie tylko prymitywne wartości, ale także obiekty, tablice, czy funkcje, a nawet wywoływać funkcje, które zwrócą ostateczną wartość, która stanie się domyślną. O tak:
function add(a, b = getDefaultValue()) {
return a + b;
}
function getDefaultValue() {
return 4;
}
add(3, 4); //7
add(3); //7
Warto pamiętać także o tym, że parametry mają dostęp do wartości poprzednich parametrów:
function add(a, b = getDefaultValue(), c = b - 2) {
return a + b + c;
}
function getDefaultValue() {
return 4;
}
add(3, 4, 2); //9
add(3, 4, 5); //12
add(3); //9
Mała uwaga
Jeśli nie korzystacie jeszcze z ES6, a chcecie wprowadzić parametry domyślne do funkcji, nie używajcie proszę tej składni, którą niestety spotyka się bardzo często:
function add(a, b) {
b = b || 4;
return a + b;
}
Owszem, kod jest krótszy od b = typeof b !== 'undefined' ? b : 4
i w większości przypadków będzie działał prawidłowo, ale pamiętajcie, że liczba zero w JS jest traktowana jako fałsz, a więc podając 0 jako parametr b uzyskamy tutaj rezultat odbiegający od oczekiwanego:
function add(a, b) {
b = b || 4;
return a + b;
}
add(5, 0) //9