??
Operator ?? (nullish coalescing) zwraca prawą stronę tylko wtedy, gdy lewa to null lub undefined. Idealny do wartości domyślnych.
- Zwraca
- Lewą wartość, jeśli nie jest
nullaniundefined, w przeciwnym razie prawą.
Przykład
#const savedVolume = 0
const savedName = null
console.log(savedVolume ?? 50)
console.log(savedVolume || 50)
console.log(savedName ?? 'Gość')Definicja i zastosowanie
#Operator ?? sprawdza lewą stronę. Jeśli jest null albo undefined, zwraca prawą. W każdym innym przypadku zwraca lewą, nawet gdy to 0, pusty napis "" lub false.
Na tym polega różnica względem ||, który odrzuca wszystkie wartości fałszywe. Przy liczbach i ustawieniach to istotne: volume || 50 zamieni celowo ustawione 0 na 50, a volume ?? 50 zostawi 0.
Prawa strona jest obliczana tylko wtedy, gdy jest potrzebna. Operator przypisania ??= ustawia wartość tylko wtedy, gdy zmienna lub właściwość jest pusta: settings.lang ??= "pl". Łącząc ?? z || lub &&, musisz dodać nawiasy, inaczej dostaniesz błąd składni.
Składnia
#leftExpr ?? rightExpr
target ??= valueWięcej przykładów
#function createGame(options) {
return {
lives: options.lives ?? 3,
hints: options.hints ?? true,
level: options.level ?? 1
}
}
console.log(createGame({ lives: 0, hints: false }))const profile = { name: 'Kuba', avatar: null }
profile.avatar ??= 'default.png'
profile.name ??= 'Anonim'
console.log(profile)const nickname = ''
const fallback = null
const label = (nickname || fallback) ?? 'Anonim'
console.log(label)Zapis nickname || fallback ?? "Anonim" bez nawiasów jest błędem składni. Nawiasy jasno pokazują, co ma się wykonać najpierw.
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
#- Dla liczb, flag i ustawień, w których
0,falselub""są poprawnymi wartościami, wybieraj??zamiast||. - Domyślne wartości parametrów (
function fn(x = 5)) i destrukturyzacji działają tylko dlaundefined, a??także dlanull. Dobierz narzędzie do danych, które dostajesz.
Powiązane hasła
#- ?.Operator ?. (optional chaining) bezpiecznie odczytuje właściwość. Gdy obiekt to null lub undefined, zwraca undefined zamiast błędu.
- &&, ||, !Operatory logiczne I (&&), LUB (||) i NIE (!). Łączą warunki, a && i || zwracają jedną ze swoich stron.
- ? :Operator warunkowy (ternary) zwraca jedną z dwóch wartości zależnie od warunku, w jednym krótkim wyrażeniu.
- DestrukturyzacjaDestrukturyzacja (destructuring) wyciąga wartości z tablic i obiektów prosto do osobnych zmiennych.
Widzisz błąd albo brakuje przykładu? Napisz do nas.