Modest Programmer logo
19 września 2018
Tagi: 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.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista. Specjalizuje się w C#, głównie WPF, Windows Forms oraz ASP.NET MVC.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2018 modestprogrammer.pl. Wszelkie prawa zastrzeżone Design by Kazimierz Szpin