Parametry domyślne
Wartości, które parametr funkcji dostaje, gdy argument nie zostanie podany albo ma wartość undefined.
Przykład
#function createPlayer(name = 'Gość', level = 1) {
return `${name}, poziom ${level}`
}
console.log(createPlayer('Ania', 5))
console.log(createPlayer('Kuba'))
console.log(createPlayer())Definicja i zastosowanie
#Parametr domyślny zapisujesz w definicji funkcji przez znak równości: function greet(name = "Gość"). Jeśli przy wywołaniu pominiesz argument albo przekażesz undefined, parametr dostanie wartość domyślną. Dzięki temu funkcja nie musi sama sprawdzać, czy dostała dane.
Wartość domyślna zadziała tylko dla undefined. Przekazanie null, 0, false czy pustego napisu to świadomy wybór wartości, więc zostanie ona użyta. To odróżnia parametry domyślne od starszego wzorca name = name || "Gość", który zastępował też poprawne dane, np. zero.
Wyrażenie domyślne jest obliczane przy każdym wywołaniu, w którym jest potrzebne, a nie raz przy definicji funkcji. Każde wywołanie z items = [] dostaje więc nową, pustą tablicę. Wartość domyślna może korzystać z wcześniejszych parametrów, np. (points, bonus = points / 2), i łączy się z destrukturyzacją: function setup({ theme = "dark" } = {}).
Składnia
#function name(param = defaultValue) {}
const fn = (a, b = a * 2) => {}
function name({ key = value } = {}) {}Więcej przykładów
#function setVolume(volume = 50) {
return volume
}
console.log(setVolume(undefined))
console.log(setVolume(null))
console.log(setVolume(0))
function oldSetVolume(volume) {
volume = volume || 50
return volume
}
console.log(oldSetVolume(0))Stary wzorzec z || zamienił poprawną głośność 0 na 50. Parametr domyślny zostawił zero, bo reaguje tylko na undefined.
function createTask(title, points = 10, bonus = points / 2) {
return { title, points, bonus }
}
console.log(createTask('Quiz'))
console.log(createTask('Projekt', 40))function startLesson({ speed = 1, subtitles = true } = {}) {
return `Prędkość ${speed}x, napisy: ${subtitles ? 'tak' : 'nie'}`
}
console.log(startLesson({ speed: 1.5 }))
console.log(startLesson())Końcowe = {} sprawia, że funkcję można wywołać bez argumentu. Bez niego destrukturyzacja undefined rzuciłaby TypeError.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Parametry z wartościami domyślnymi umieszczaj na końcu listy. Wtedy wystarczy pominąć ostatnie argumenty, bez przekazywania
undefinedw środku. - Przy obiekcie opcji dodaj
= {}dla całego parametru. Bez tego wywołanie funkcji bez argumentu rzuciTypeErrorprzy destrukturyzacji. - Gdy chcesz zastąpić także
null, użyj w ciele funkcji operatora??:const size = input ?? 16.
Powiązane hasła
#- functionDeklaruje nazwaną funkcję: blok kodu z parametrami, który można wywoływać wiele razy i który może zwrócić wynik.
- DestrukturyzacjaDestrukturyzacja (destructuring) wyciąga wartości z tablic i obiektów prosto do osobnych zmiennych.
- ??Operator ?? (nullish coalescing) zwraca prawą stronę tylko wtedy, gdy lewa to null lub undefined. Idealny do wartości domyślnych.
- Parametr resztowy (...rest)Zbiera wszystkie pozostałe argumenty funkcji do prawdziwej tablicy. Zapisujesz go jako ...nazwa na końcu listy.
- () => {}Funkcja strzałkowa (arrow function): krótszy zapis funkcji, bez własnego this, z niejawnym return dla jednego wyrażenia.
Widzisz błąd albo brakuje przykładu? Napisz do nas.