Parametry domyślne w JavaScript: praktyczny przewodnik

Parametry vs argumenty

Dwa słowa, które ciągle się mylą. Parametr to nazwa w definicji funkcji. Argument to wartość, którą przekazujesz przy wywołaniu. Ta sama idea co w Pythonie i większości innych języków:

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));

a i b to parametry. 2 i 3 to argumenty. JavaScript wiąże je według pozycji: pierwszy argument z pierwszym parametrem i tak dalej. Różnica jest niewielka, ale tego słownictwa używają komunikaty o błędach i MDN.

JavaScript luźno podchodzi do liczby argumentów

W przeciwieństwie do wielu języków JavaScript nie przejmuje się, gdy przekażesz za mało albo za dużo argumentów. Brakujące parametry stają się undefined. Nadmiarowe są po cichu ignorowane:

function greet(first, last) {
  console.log(`Hello, ${first} ${last}`);
}

greet("Ada");
greet("Ada", "Lovelace");
greet("Ada", "Lovelace", "extra", "ignored");

Pierwsze wywołanie wypisuje Hello, Ada undefined: last nie dostał wartości, więc jest undefined, a template literals chętnie to wstawiają. Bez błędu, bez ostrzeżenia. Ta pobłażliwość czasem się przydaje, a czasem jest źródłem błędów, i właśnie dlatego istnieją parametry domyślne.

Ustawianie wartości domyślnej

Po nazwie parametru wstaw = i wartość. Jeśli wywołujący nie przekaże tego argumentu (albo przekaże undefined), wkracza wartość domyślna:

function greet(name = "friend") {
  console.log(`Hello, ${name}!`);
}

greet();
greet("Ada");
greet(undefined);

Wszystkie trzy wywołania działają. Pierwsze i trzecie uruchamiają wartość domyślną, drugie używa przekazanej wartości. To składnia ES6: przed 2015 rokiem trzeba było pisać w ciele funkcji name = name || "friend", co miało własne błędy przy wartościach falsy, takich jak 0 i "".

Wartości domyślne mogą być dowolnym wyrażeniem, nie tylko literałem:

function log(message, time = new Date().toISOString()) {
  console.log(`[${time}] ${message}`);
}

log("server started");

Wyrażenie jest obliczane przy każdym wywołaniu, a nie raz przy definiowaniu funkcji. Nie ma więc pułapki mutowalnych wartości domyślnych, jaką ma Python: każde wywołanie dostaje świeże new Date().

Wartość domyślną uruchamia tylko undefined

To zasada, która zaskakuje. Wartości domyślne działają, gdy argument to undefined, a nie gdy jest falsy, i nie wtedy, gdy to null:

function greet(name = "friend") {
  console.log(`Hello, ${name}!`);
}

greet(null);
greet("");
greet(0);
greet(undefined);

Tylko ostatnie wywołanie używa "friend". Jawne przekazanie null znaczy "wartość to null" i JavaScript bierze cię za słowo. To samo dotyczy pustych stringów i zer: to wartości, a nie brakujące argumenty.

Jeśli chcesz traktować null tak samo jak brak argumentu, musisz to obsłużyć samodzielnie:

function greet(name) {
  name = name ?? "friend";
  console.log(`Hello, ${name}!`);
}

greet(null);
greet(undefined);
greet("Ada");

Operator ?? (nullish coalescing) traktuje i null, i undefined jako "brak". Więcej o nim w jednym z kolejnych rozdziałów.

Wartości domyślne mogą korzystać z wcześniejszych parametrów

Parametry są obliczane od lewej do prawej, więc późniejsza wartość domyślna może używać każdego parametru, który był przed nią:

function box(width, height = width, depth = width) {
  return { width, height, depth };
}

console.log(box(5));
console.log(box(5, 10));
console.log(box(5, 10, 2));

Wywołanie z jednym argumentem daje sześcian. Dwa argumenty dają graniastosłup o kwadratowej podstawie. Kierunek ma znaczenie: nie możesz odwołać się do parametru, który nie został jeszcze zadeklarowany:

function bad(a = b, b = 1) {
  return a + b;
}

bad();   // ReferenceError: Cannot access 'b' before initialization

Te same zasady co przy zmiennych zadeklarowanych przez let: użycie przed deklaracją to błąd.

Wartości domyślne a destrukturyzacja

Możesz jednocześnie destrukturyzować parametry i nadawać im wartości domyślne. To popularny wzorzec dla argumentów w postaci "obiektu opcji":

function createUser({ name, role = "member", active = true } = {}) {
  return { name, role, active };
}

console.log(createUser({ name: "Ada" }));
console.log(createUser({ name: "Boris", role: "admin" }));
console.log(createUser());

Działają tu dwie warstwy wartości domyślnych. Wewnętrzne (role = "member", active = true) uzupełniają brakujące właściwości. Zewnętrzne = {} obsługuje przypadek, w którym wywołujący w ogóle nie przekaże argumentu: bez niego createUser() próbowałoby destrukturyzować undefined i rzuciłoby błąd.

Na początku ten wzorzec wygląda gęsto, ale jest wszędzie we współczesnym kodzie JavaScript. Gdy oko zacznie rozpoznawać { ... } = {} jako "opcje z wartościami domyślnymi", czyta się go szybko.

Pomijanie środkowego argumentu

JavaScript nie ma argumentów nazwanych jak w Pythonie. Żeby pominąć środkowy parametr i użyć jego wartości domyślnej, przekazujesz jawnie undefined:

function format(text, prefix = ">> ", suffix = " <<") {
  return prefix + text + suffix;
}

console.log(format("hello"));
console.log(format("hello", undefined, " !!!"));
console.log(format("hello", "-- "));

Przekazanie undefined jako prefix zachowuje wartość domyślną. To brzydkie. Jeśli często piszesz undefined w wywołaniach, to sygnał, żeby przejść na obiekt opcji:

function format(text, { prefix = ">> ", suffix = " <<" } = {}) {
  return prefix + text + suffix;
}

console.log(format("hello", { suffix: " !!!" }));

Teraz wywołujący nazywa to, co chce nadpisać, a kolejność nie ma znaczenia.

Wartości domyślne nie wliczają się do length

Drobny szczegół, który rzadko ma znaczenie, ale czasem wprowadza w błąd. Właściwość length funkcji podaje liczbę parametrów przed pierwszym parametrem z wartością domyślną:

function a(x, y) {}
function b(x, y = 1) {}
function c(x = 1, y) {}

console.log(a.length);
console.log(b.length);
console.log(c.length);

Biblioteki, które analizują funkcje (na przykład niektóre narzędzia do testów i wstrzykiwania zależności), używają length do liczenia "wymaganych" parametrów. Dobrze wiedzieć, że taka zasada istnieje, ale nie warto jej zapamiętywać, chyba że piszesz tego typu narzędzie.

Dalej: rest i spread

Wartości domyślne obsługują przypadek, gdy znasz parametry z góry. Czasem ich nie znasz: chcesz, żeby funkcja przyjmowała dowolną liczbę argumentów, albo przekazać zestaw argumentów do innej funkcji. Do tego służą ...rest i operator spread, o których w następnej części.