Parametry domyślne w JavaScript

We wczorajszym artykule omówiłem Ci jak przekazywać argumenty do funkcji. Przedstawiłem co się stanie, jeżeli przekażesz za dużo lub za mało argumentów. Dzisiaj przejdziemy do tematu powiązanego właśnie z argumentami, opiszę Ci jak używać parametrów domyślnych w języku JavaScript.

Załóżmy, że mamy funkcję, która na podstawie przekazanych argumentów wypisuje informacje o pogodzie.

function displayWeather(welcome, when, weather) {
    console.log(`${welcome}! ${when}, mamy ${weather} pogodę.`);
}
displayWeather('Dzień dobry', 'Dzisiaj', 'piękną'); // Dzień dobry! Dzisiaj, mamy piękną pogodę.

A co się wydarzy, gdy nie przekażemy do tej funkcji żadnego argumentu? Na pewno wiesz już to z poprzedniego artykułu.

displayWeather(); // undefined! undefined, mamy undefined pogodę.

Domyślnie wszystkie parametry będą undefined. A co jeśli chcielibyśmy, aby zawsze nawet wtedy gdy nie przekażemy żadnego argumentu wyświetlała się sensowna informacja, należy użyć parametrów domyślnych. Możesz to zrobić w taki sposób:

function displayWeather(welcome, when, weather) {
    welcome = welcome || 'Cześć';
    when = when || 'Teraz';
    weather = weather || 'brzydką';

    console.log(`${welcome}! ${when}, mamy ${weather} pogodę.`);
}
displayWeather('Dzień dobry', 'Dzisiaj', 'piękną'); // Dzień dobry! Dzisiaj, mamy piękną pogodę.
displayWeather(); // Cześć! Teraz, mamy brzydką pogodę.

Jeżeli, któryś z argumentów jest falsy, wtedy przypisujemy do niego odpowiednią wartość. Taki zapis co prawda w tym przypadku działa prawidłowo, ale ma on kilka wad. Co jeśli chcielibyśmy przekazać do funkcji wartość typu number 0?

function showNumber(num) {
    num = num || 100;

    console.log(num);
}
showNumber(1); //1
showNumber(0); //100

Mimo iż, chcieliśmy przekazać wartość 0 do funkcji, to została ona potraktowana jako falsy i do num została przypisana wartość 100.

W ES6 został wprowadzony nowy zapis, który możesz stosować do definiowania w prawidłowo sposób domyślnych parametrów funkcji.

function displayWeather(welcome = 'Cześć', when = 'Teraz', weather = 'brzydką') {
    console.log(`${welcome}! ${when}, mamy ${weather} pogodę.`);
}
displayWeather('Dzień dobry', 'Dzisiaj', 'piękną');
displayWeather();

Jak widzisz powyższy zapis działa tak samo dla poprzedniego przykładu, a co najważniejsze nie powoduje błędów np. z wartością 0. Poza tym jest prostszy w zapisie i bardziej czytelny. Oczywiście nie wszystkie parametry w funkcji muszę mieć wartość domyślną, ale tutaj bardzo ważna rzecz, musisz pamiętać aby parametry domyślne były zdefiniowane w funkcji jako ostatnie. Jeżeli nie zastosujesz się do tego, to wtedy możesz mieć wyniki takie jak tutaj:

function displayWeather(welcome, when = 'Teraz', weather) {
    console.log(`${welcome}! ${when}, mamy ${weather} pogodę.`);
}
displayWeather('Dzień dobry', 'piękną'); // Dzień dobry! piękną, mamy undefined pogodę.

Jak widzisz argumenty zostały przekazane kolejno do 1 i 2 parametru, co za tym idzie parametr weather stał się undefined. Jeżeli masz tylko 1 parametr domyślny, to funkcja powinna wyglądać w taki sposób:

function displayWeather(welcome, when, weather = 'słoneczną') {
    console.log(`${welcome}! ${when}, mamy ${weather} pogodę.`);
}
displayWeather('Dzień dobry', `Dzisiaj`); // Dzień dobry! Dzisiaj, mamy słoneczną pogodę.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Obiekt arguments w JavaScript.
Następny artykuł - Get i set w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Parametry domyślne w JavaScript

Komentarze (1)

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły