Operatory logiczne w JavaScript – podstawy

Operatory logiczne w JS to specjalne symbole, które służą do wykonywania operacji logicznych. Są powszechnie używane w instrukcjach warunkowych (np. if) i pętlach (np. while) oraz do tworzenia wartości zmieniających się zależnie od warunków (np. zmienna userType może przyjąć wartość "admin" lub "regular" zależnie od tego, czy zalogował się administrator, czy zwykły użytkownik).

Dzięki nim program może wykonywać różny kod w zależności od spełnienia określonych warunków, np. „Jeśli użytkownik wprowadził niepoprawny adres e-mail i nie wypełnił pola Imię, wyświetl błąd. W przeciwnym przypadku prześlij dane z formularza i wyświetl stronę z podziękowaniem".

Czym są wartości truthy i falsy w JavaScript?

Zanim przejdziemy do operatorów, musimy zrozumieć jedno: w JavaScripcie każda wartość da się potraktować jako prawdziwa albo fałszywa. Wartości fałszywe nazywamy falsy, prawdziwe – truthy. To ułatwia planowanie warunków, bo wiemy, czego „spodziewać się" po danej wartości.

Nie musisz uczyć się tego na pamięć. Wystarczy zapamiętać krótką listę wartości falsy, a cała reszta (liczby, stringi, obiekty, tablice itd.) jest truthy:

Wszystkie mają coś wspólnego z brakiem, więc szybko Ci się utrwalą.

Jak sprawdzić, czy wartość jest truthy czy falsy?

Użyj wbudowanej funkcji Boolean(), która zamienia dowolną wartość na true lub false:

Boolean(null) // false -> null to wartość falsy
Boolean(0) // false -> 0 to wartość falsy
Boolean("John") // true -> niepusty string to wartość truthy
Boolean(155) // true -> liczba różna od zera to wartość truthy
Boolean({name: "Lizzy", age: 21}) // true -> obiekt to wartość truthy

Uwaga na pusty obiekt i pustą tablicę – łatwo je skojarzyć z „brakiem", ale w JavaScripcie to wartości truthy:

Boolean({}) // true -> pusty obiekt jest truthy
Boolean([]) // true -> pusta tablica również jest truthy

Podobna pułapka dotyczy obiektu typu Boolean. Zapis new Boolean(false) tworzy obiekt, a każdy obiekt jest truthy – więc taka „fałszywa" wartość zachowa się w warunku jak prawdziwa:

if (new Boolean(false)) {
  console.log("To się wykona!") // obiekt jest truthy, choć w środku jest false
}

Dlatego w kodzie używaj prostych wartości true i false, a Boolean() wywołuj bez new.

Co zwracają operatory porównania?

W temacie wartości typu boolean trzeba jeszcze wspomnieć o operatorach porównania. Zawsze zwracają true lub false, co przyda się nam w wyrażeniach logicznych. Prawdopodobnie masz je już za sobą, lecz jeśli nie, uzupełnij wiedzę przed dalszą częścią artykułu:

Przykłady działania:

2 != "a" // true, ponieważ liczba 2 nie jest równa łańcuchowi znaków "a"
3 === "3" // false, ponieważ liczba 3 i string "3" mają różne typy danych
2 !== "a" // true, ponieważ liczba 2 i string "a" różnią się typem
5 > 1 // true, ponieważ liczba 5 jest większa od liczby 1
4 >= 4 // true, ponieważ liczba 4 jest większa lub równa liczbie 4
2 < 6 // true, ponieważ liczba 2 jest mniejsza od liczby 6
3 <= 3 // true, ponieważ liczba 3 jest mniejsza lub równa liczbie 3

Jakie są operatory logiczne w JavaScript?

W JavaScripcie podstawowe operatory logiczne to trzy symbole:

Jak działa operator AND (&&)?

Operator AND działa jak historyczne liberum veto – gdy jeden poseł zaprotestował, zrywany był sejm, a wszystkie uchwały uchylane. Dokładnie tak jest z operatorem && – wystarczy jedna wartość falsy, by całe wyrażenie stało się fałszywe, np.:

const isHappy = "nice day" && ""

Boolean(isHappy) // false, ponieważ w wyrażeniu wystąpił pusty string (wartość falsy)

Jeżeli wszystkie wartości będą truthy, wyrażenie będzie prawdziwe:

const isHappy = "nice day" && "cheerful people"

Boolean(isHappy) // true, ponieważ stringi to wartości prawdziwe

Operatory porównania zwracają true lub false, więc również mogą znaleźć się w wyrażeniach:

2 === 2 && "a" === "a" // true, ponieważ oba wyrażenia zwróciły true
2 !== 3 && 1 > 5 // false, ponieważ drugie wyrażenie zwróciło false

Wyrażenie może składać się z wielu wartości, nie tylko z dwóch, np.:

const isFirstYearStudent = {name: "Mary", surname: "Sue"} && 18 && "afterExams" && []

Boolean(isFirstYearStudent) // true, ponieważ wszystkie wartości są prawdziwe (nawet pusta tablica)

Jeśli będziesz potrzebować sprawdzenia tablicy (czy jest pusta, czy nie), lepiej sprawdzić jej długość:

const isFirstYearStudent = {name: "Mary", surname: "Sue"} && 18 && "afterExams" && [].length

Boolean(isFirstYearStudent) // false, ponieważ jedna z wartości jest falsy (tutaj: długość tablicy to 0)

Widzisz? Wystarczy jedna fałszywa wartość, by całe wyrażenie stało się fałszywe! Operator && zaczyna sprawdzanie od lewej, czyli w naszym przykładzie najpierw sprawdzi obiekt z danymi studentki, potem liczbę (wiek), potem informację o egzaminach i na końcu długość tablicy.

Zapamiętaj: gdybyśmy umieścili wartość falsy na początku wyrażenia z operatorem AND, sprawdzanie zostałoby przerwane na tej pierwszej wartości. Działa to na zasadzie: po co sprawdzać resztę, skoro już wystąpiła wartość fałszywa (po co pytać innych posłów o zdanie, skoro pierwszy krzyknął już „liberum veto"). Takie zachowanie nazywamy short-circuit evaluation (skracanie wyliczania wyrażenia).

W praktyce nie wpisuje się wartości do wyrażenia bezpośrednio (np. "nice day" && "cheerful people"), lecz przechowuje w zmiennych (lub zwraca z funkcji) i to ich nazwy umieszcza się w wyrażeniu. O tym powiemy sobie w następnym artykule. Na razie zrozumiemy logikę.

Co zwraca operator AND?

Jeśli wszystkie wartości w wyrażeniu są prawdziwe, to operator zwraca ostatnią wartość, np.:

console.log("coffee" && "tea" && 155 && [1, 2, 3]) // w konsoli zobaczymy [1, 2, 3]

Jeśli interpreter podczas sprawdzania wyrażenia natknie się na wartość falsy, to przerwie sprawdzanie i zwróci tę wartość, np.:

console.log("coffee" && 155 && null && 0) // w konsoli zobaczymy null

Jak działa operator OR (||)?

Działa na zasadzie wyboru ciastka w cukierni. Kończymy wybierać, gdy któryś z wypieków nam się spodoba. Wyobraźmy sobie taki dialog:

• Ekspedientka: Dzień dobry, proponuję dzisiaj undefined.
• Klient: To jest falsy, proszę mówić dalej.
• E: To może 2 > 5?
• K: Ech, false. A coś innego?
• E: To może "donut"?
• K: Truthy, poproszę.
• E: A czy do tego podać…
• K: Nie, dziękuję, to wszystko.

Takie wyrażenie moglibyśmy zapisać następująco:

const isBakingChosen = undefined || 2 > 5 || "donut" || "something else"

Boolean(isBakingChosen) // true, ponieważ string "donut" jest truthy

Zapamiętaj: interpreter skończył sprawdzanie, gdy trafił na wartość truthy (string "donut"). Nie dotarł już do "something else". Działa to na zasadzie: po co sprawdzać resztę, skoro już wystąpiła wartość prawdziwa (po co dalej oglądać ciastka, skoro już wybrałam).

Operator OR zadziała też oczywiście z operatorami porównania, co znalazło się w przykładzie cukierni (wyrażenie 2 > 5):

2 === 2 || "a" === "a" // true, ponieważ już pierwsze wyrażenie zwraca true
1 > 5 || 2 !== 3 // true, ponieważ drugie wyrażenie zwraca true

Wyrażenie z operatorem OR będzie fałszywe tylko wówczas, gdy wszystkie wartości będą falsy:

const isBakingChosen = undefined || 2 > 5 || 0 || ""

Boolean(isBakingChosen) // false, ponieważ żadna z wartości nie jest truthy
2 >= 3 || 1 > 5 // false, ponieważ żadne z wyrażeń nie zwraca true

Co zwraca operator OR?

Jeśli pierwsza wartość jest prawdziwa, to kolejne nie są nawet sprawdzane, a operator || zwraca tę pierwszą, np.:

console.log("coffee" || "tea" || null) // w konsoli zobaczymy "coffee"

Jeśli operator natyka się na wartości fałszywe, to sprawdza (od lewej) tak długo, aż trafi na prawdziwą:

console.log(null || undefined || "" || 155) // w konsoli zobaczymy 155

Jeśli operator skończy sprawdzanie, a wszystkie wartości są fałszywe, to zwraca ostatnią z nich:

console.log(null || undefined || "" || 0) // w konsoli zobaczymy 0

Jak działa operator NOT (!)?

Tutaj nie „łączymy" wartości w dłuższe czy krótsze wyrażenia jak w przypadku AND i OR. Symbol wykrzyknika wstawiamy przed wartość (lub przed zmienną, która ją przechowuje), aby ją zanegować. Operacja ta zawsze zwraca true lub false (czyli typ boolean). Negacja wartości truthy da false, a negacja falsy zwróci true.

Boolean(null) // false -> null to wartość falsy
console.log(!null) // true -> zanegowaliśmy wartość fałszywą, więc otrzymujemy true

Boolean("John") // true -> niepusty string to wartość truthy
console.log(!"John") // false -> zanegowaliśmy wartość prawdziwą, więc otrzymujemy false

Boolean(155) // true -> liczba to wartość truthy
console.log(!155) // false -> zanegowaliśmy wartość prawdziwą, więc otrzymujemy false

A co z operatorami porównania? Jeśli chcemy zanegować wartość zwracaną przez takie wyrażenie, musimy wziąć je w nawias:

!(2 !== 3) // false, ponieważ wyrażenie w nawiasie zwraca true
!(2 === "a") // true, ponieważ wyrażenie w nawiasie zwraca false

Co to jest podwójna negacja (!!)?

Postawienie dwóch wykrzykników przed wartością to „szybki sposób" na uzyskanie odpowiadającego jej typu boolean. Jeśli wartość jest truthy, zwrócone zostanie true, jeśli falsy – false. Działa dokładnie tak samo jak Boolean(wartość):

console.log(!!undefined) // false
console.log(!![1, 2, 3]) // true

Czym różni się ?? od || w JavaScript?

Przy okazji || warto poznać operator ?? (nullish coalescing, „operator łączenia z null"). Choć wygląda podobnie, nie jest tym samym: || reaguje na każdą wartość falsy, a ?? tylko na null i undefined.

To ważna różnica, gdy 0, pusty string albo false są dla Ciebie poprawnymi wartościami. Wyobraź sobie ustawienie głośności, w którym 0 oznacza „wyciszone":

const volume = 0

console.log(volume || 50) // 50 -> || uznał 0 za falsy i podmienił go na wartość domyślną
console.log(volume ?? 50) // 0 -> ?? podmienia tylko null i undefined, więc 0 zostaje

W praktyce:

Pokrewny do ?? jest operator ?. (optional chaining), który bezpiecznie odczytuje właściwości, gdy obiekt może nie istnieć (user?.address). Nie jest operatorem logicznym, ale często pracuje w parze z ??.

Czy w JavaScript istnieje operator XOR?

Nie ma osobnego logicznego operatora XOR (alternatywy wykluczającej). Symbol ^ to bitowy XOR – działa na bitach liczb, a nie na wartościach truthy i falsy, więc nie będziemy go tu omawiać. Gdy potrzebujesz logicznego XOR dla dwóch wartości boolean, wystarczy porównać je operatorem !==:

true !== false // true -> dokładnie jedna z wartości jest prawdziwa
true !== true // false -> obie wartości są takie same

Co dalej?

To wszystko, jeśli chodzi o podstawy operatorów logicznych. Zrozumienie tego pomoże Ci w ich wykorzystaniu. Przed nami jeszcze m.in. przechowywanie wartości w zmiennych, łączenie operacji logicznych i przenoszenie wyrażeń logicznych do osobnych funkcji. Zapraszam do artykułu Operatory logiczne w JavaScript – sposoby użycia i błędy.

Z code review w devmentor.pl: najczęstszy błąd z operatorami logicznymi, jaki widzimy u początkujących, to użycie || do wartości domyślnej tam, gdzie 0, false albo pusty string są poprawnymi danymi. Formularz „ilość sztuk" z wartością 0 nagle pokazuje 1, bo 0 || 1 zwraca 1. Zanim wstawisz ||, zadaj sobie pytanie: czy 0 albo "" mogą być tu prawidłową wartością? Jeśli tak, sięgnij po ??.

Wskazówka mentora: w kodzie, który czytasz po raz pierwszy, traktuj && i || jak „bramki", a nie jak operatory zwracające true/false. Zwracają konkretną wartość, i właśnie na tym najczęściej wykłada się debugowanie (np. user && user.name zwraca undefined albo "", a nie false). Gdy potrzebujesz czystego booleana, owiń wyrażenie w Boolean(...) albo !!.