&&, ||, !
Operatory logiczne I (&&), LUB (||) i NIE (!). Łączą warunki, a && i || zwracają jedną ze swoich stron.
- Zwraca
&&i||zwracają wartość jednej ze stron (niekoniecznie typu boolean).!zawsze zwracatruelubfalse.
Przykład
#const isLoggedIn = true
const fuel = 0
console.log(isLoggedIn && fuel > 0)
console.log(isLoggedIn || fuel > 0)
console.log(!isLoggedIn)Definicja i zastosowanie
#&& (i) jest prawdziwe, gdy obie strony są prawdziwe, || (lub), gdy prawdziwa jest co najmniej jedna, a ! (nie) odwraca wartość logiczną. Najczęściej łączysz nimi warunki w if, np. if (isLoggedIn && hasFuel).
&& i || nie zawsze zwracają true lub false, tylko jedną ze swoich stron. a || b zwraca a, jeśli jest prawdziwe (truthy), a w przeciwnym razie b. a && b zwraca a, jeśli jest fałszywe (falsy), a w przeciwnym razie b. Podwójne !!value zamienia dowolną wartość na true lub false.
Oba operatory działają na skróty: prawa strona nie jest obliczana, gdy wynik jest znany już po lewej. Dzięki temu user && user.name nie rzuci błędu dla null. && ma wyższy priorytet niż ||, a operatory ||= i &&= przypisują wartość tylko pod odpowiednim warunkiem.
Składnia
#a && b
a || b
!a
!!a
a ||= b
a &&= bWięcej przykładów
#console.log('Ania' || 'Gość')
console.log('' || 'Gość')
console.log('Ania' && 'zalogowana')
console.log(0 && 'nigdy')
console.log(!!'tekst', !!0)function loadAvatar() {
console.log('Pobieram avatar...')
return 'avatar.png'
}
const cached = 'cache.png'
const avatar = cached || loadAvatar()
console.log(avatar)loadAvatar() nie zostało wywołane, bo lewa strona || była już prawdziwa.
const player = { nickname: '', score: 40 }
player.nickname ||= 'Anonim'
player.score &&= player.score * 2
console.log(player)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
#- Uważaj na
||przy wartościach domyślnych. Zastąpi również0,""ifalse, które mogą być poprawnymi danymi. W takich przypadkach użyj??. - W złożonych warunkach dodawaj nawiasy, nawet jeśli priorytet by wystarczył:
(isAdmin || isMentor) && isActiveczyta się jednoznacznie. - W Reakcie zapis
{count && <Badge />}wyświetli0, gdycountwynosi zero. Bezpieczniej napisać{count > 0 && <Badge />}.
Powiązane hasła
#- ??Operator ?? (nullish coalescing) zwraca prawą stronę tylko wtedy, gdy lewa to null lub undefined. Idealny do wartości domyślnych.
- ? :Operator warunkowy (ternary) zwraca jedną z dwóch wartości zależnie od warunku, w jednym krótkim wyrażeniu.
- if...elseWykonuje blok kodu tylko wtedy, gdy warunek jest prawdziwy, a w przeciwnym razie opcjonalny blok else.
- ===Operator ścisłej równości porównuje wartości bez konwersji typów: true daje tylko ten sam typ i ta sama wartość.
- ?.Operator ?. (optional chaining) bezpiecznie odczytuje właściwość. Gdy obiekt to null lub undefined, zwraca undefined zamiast błędu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.