Operatory logiczne w JavaScript – podstawy

 Co to jest operator logiczny

Operatory logiczne w JS to specjalne symbole lub słowa, które służą do wykonywania operacji logicznych. Są powszechnie używane w instrukcjach warunkowych (np. if czy pętli 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).

Operatory logiczne pozwalają programiście na wykonywanie różnych działań (różnego kodu) 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”.

 Wartości truthy i falsy w JavaScript

Zanim przejdziemy do omówienia operatorów logicznych, musimy zrozumieć, że w JavaScripcie niektóre wartości są zawsze fałszywe (ang. falsy), a inne zawsze prawdziwe (ang. truthy). To ułatwi nam planowanie warunków, ponieważ będziemy wiedzieli, czego „spodziewać się” po danej wartości.

Nie jest to trudne. Wystarczy zapamiętać wartości falsy, a cała reszta (liczby, stringi, obiekty, tablice itd.) będzie już truthy.

Wartości zawsze fałszywe (falsy) to:

• false,
• null,
• undefined,
• 0,
• NaN (Not a Number),
• "" (pusty string).

Wszystkie mają coś wspólnego z brakiem, szybko więc Ci się utrwalą. W razie czego zawsze możesz zweryfikować wartości za pomocą wbudowanej w JS funkcji Boolean():

Boolean(null) // false -> null to wartość falsy

Boolean(0) // false -> 0 to wartość falsy

Boolean("John") // true -> string (nie pusty) to wartość truthy

Boolean(155) // true -> liczba to wartość truthy

Boolean({name: "Lizzy", age: 21}) // true -> obiekt to wartość truthy

// Uwaga na pusty obiekt i pustą tablicę (ich nie kojarz z „brakiem”)

Boolean( {} ) // true => pusty obiekt jest truthy

Boolean ( [] ) // true => pusta tablica również jest truthy

 Wynik działania operatorów porównania

W temacie wartości typu boolean trzeba jeszcze wspomnieć o wyniku działania operatorów porównania. Zawsze zwracają true lub false, co przyda się nam przy wyrażeniach logicznych. Prawdopodobnie operatory porównania masz już za sobą, lecz jeśli nie, to uzupełnij wiedzę przed przejściem do dalszej części artykułu.

Operatory porównania w JavaScripcie to:

• Równa się (==) – porównuje, czy dwie wartości są równe.
• Nie równa się (!=) – porównuje, czy dwie wartości nie są równe.
• Równa się, strict equality (===) – porównuje, czy dwie wartości są równe zarówno pod względem typu, jak i wartości (jeśli typ się nie zgadza, to wartość już nie jest sprawdzana).
• Nie równa się, strict inequality (!==) – porównuje, czy dwie wartości są różne pod względem typu lub wartości danych.
• Większe niż (>) – sprawdza, czy jedna wartość jest większa niż druga.
• Większe lub równe (>=) – sprawdza, czy jedna wartość jest większa lub równa drugiej.
• Mniejsze niż (<) – sprawdza, czy jedna wartość jest mniejsza niż druga.
• Mniejsze lub równe (<=) – sprawdza, czy jedna wartość jest mniejsza lub równa drugiej.

Przykłady działania operatorów porównania:

2 != "a" // true, ponieważ liczba 2 nie jest równa łańcuchowi znaków "a"

3 === "3" // false, ponieważ wartość 3 nie jest równa łańcuchowi znaków "3" ze względu na różnice w typie danych

2 !== "a" // true, ponieważ liczba 2 nie jest równa łańcuchowi znaków "a" ze względu na różnice w typie danych

5 > 1 // true, ponieważ liczba 5 jest większa od liczby 3

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

 Operatory logiczne w JavaScript

 Operator logiczny AND (pl. i) – symbol: &&

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)

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 logiczny && 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.

Taka jest teoria. 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 nazwy tych zmiennych (lub wywołania funkcji) 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

 Operator logiczny OR (pl. lub) – symbol: II

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

Operator OR zadziała też oczywiście z operatorami porównania, co znalazło się też 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 druga wartość nie jest nawet sprawdzana, a operator || zwraca pierwszą wartość, np.:

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

Jeśli operator natyka się na właściwości fałszywe, to (od lewej) sprawdza tak długo, aż natknie się na prawdziwą, np.:

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

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

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

 Operator logiczny NOT (negacja) – symbol: !

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 tę wartość przechowuje), aby ją zanegować. Operacja ta zwraca true lub false (czyli typ boolean). Negacja wartości truthy da nam 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 -> string (nie pusty) 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 zwraca true

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

console.log(!!undefined) // false

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

W JavaScripcie jest jeszcze jeden operator logiczny – XOR (symbol ^) – przydatny w operacjach na wartościach binarnych, więc w tym artykule nie będziemy się nim zajmować.

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”.