Warning: Invalid argument supplied for foreach() in /usr/home/nebulaus/domains/blog.nebula.us/public_html/libraries/src/Cache/Storage/FileStorage.php on line 315 ECMAScript 6: TOP 10 nowości - cz.7 - Domyślne parametry funkcji - Front End Nebula - JavaScript, HTML, CSS

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