TS TworcaStron.pl.

Operatory && oraz || (and, or) w JavaScript

Kolejny odcinek, który miał trwać kilka minut a ma ponad 20. Okazuje się, że nawet podstawowe operacje w JavaScripcie mogą być wykorzystane do całkiem zaawansowanych rzeczy.

Dziś o kolejnych dwóch operatorach: && oraz ||.

Czym są operatory logiczne &&, ||

Można powiedzieć, że operator logiczny to funkcja, która przyjmuje 2 wartości i zwraca jeden wynik, zazwyczaj true albo false.

Kilka przykładów:

const a = true && true // zwraca true
const b = false && true  // zwraca false
const c = true && false // zwraca false
const d = false && false  // zwraca false

const a = false || false // zwraca false
const b = true || false // zwraca true
const c = false || true // zwraca true
const d = true || true // zwraca true

Zasada działania jest prosta i logiczna. Gdy mamy operator && (and) spełnione muszą być wszystkie warunki, tzn. wszystkie parametry muszą być prawdziwe. Jeśli chociaż jeden nie będzie spełniony, operator nie sprawdza dalej i zwraca false.

W operatorze || (or), conajmniej jeden parametr musi być prawdziwy. Jeśli taki jest to nie ma sensu sprawdzać drugiego operatora bo wymóg został już spełniony. Tak się właśnie dzieje. Gdy operator trafia na pierwszą prawdziwą wartość, nie sprawdza już dalej bo dostał to czego chciał.

Co przyjmują parametry logiczne?

W poprzednich przykładach używałem wyłącznie parametrów booleanowskich, np. true && true // zwraca true

Ale, operatory te przyjmują KAŻDĄ dowolną wartość. Równie dobrze to może być 23 && 'to jest tekst’ . Pojawia się wtedy pytanie, jak operator rozpoznaje czy wartość jest true czy false, czy spełnia warunek czy nie?

Otóż operator wcale nie sprawdza czy wartość jest true/false. Sprawdza czy wartość jest prawdziwa/fałszywa – uwaga! Słowa klucz!.

Wartości prawdziwe (truthy) i fałszywe (falsy)

Maksymalnie krótko, wartość prawdziwa to taka, która po konwersji na boolean daje true, np.

Boolean(’hello’) => true
Boolean(1) => true
Bollean({}) => true

Natomiast wartość fałszywa to taka, która po konwersji na boolean daje false, np.

Boolean(null) => false
Boolean(0) => false

Żeby było jeszcze łatwiej zapamiętać, wszystkie wartości są prawdziwe, poza tymi pięcioma:

  • null
  • NaN
  • 0
  • ” (pusty string)
  • undefined

Każda inna po umieszczeniu w Boolean() zwróci true! Proste, prawda?

Czy operatory zawsze zwracają true albo false?

To jest najciekawsze. Te operatory wcale nie zwracają true i false. One zwracają wartości jednego z podanych parametrów! Dokładniej, w przypadku && zwraca wartość ostatniego prawdziwego parametru. Lub pierwszy fałszywy jeśli taki jest.

W przypadku || zwraca pierwszy prawdziwy parametr (stara się wykonać najkrótszą drogę). Jeśli nie ma prawdziwego, zwraca ostatni parametr (ponieważ szukając prawdziwego, przeszedł przez wszystkie i dotarł do ostatniego).

Np. jeśli mamy kod:

3 && 'hello' // 3 jest wartością prawdziwą i 'hello' jest wartością prawdziwą, więc kod zwróci 'hello'

34 && null // 23 jest wartością prawdziwą, 0 jest fałszywą, czyli zwróci null

'' && 'word' // pusty string jest wartością fałszywą, zwraca pusty string

'hello' || 'word' // 'hello' jest wartością prawdziwą, zwraca 'hello'

null || 34 // null jest wartością fałszywą, zwraca 34

Do czego to się przydaje

Korzystając z tego, że operatory zwracają jedną z podanych wartości, można to wykorzystać do szybkiego tworzenia zmiennych, bez dodatkowych instrukcji warunkowych. 

Np. jeśli chcę stworzyć zmiennną, która przyjmuje wartość od innej zmiennej „userMoney”, lub nadać jej domyślną wartość = 18, mogę zrobić coś takiego:

 const money = userMoney || 100

jeśli wartość z „userMoney” będzie wartością prawdziwą to operator || zwróci wartość z „userMoney”. Jeśli natomiast będzie fałszyła, operator zwróci pierwszą wartość prawdziwą czyli 100. 

Inny przykład. Który ma bardzo częste zastosowanie w prawdziwym kodzie: mamy obiekt „cat” a w nim wartość „name”, do której chcemy się później odwołać. 

const cat = { name: 'Flerkin'}

const catsName = cat.name

Ale co jeśli okaże się, że obiekt „cat” będzie pusty? Odwołanie do cat.name zwróci błąd. 

const cat = null

const catsName = cat.name // błąd: Cannot read property 'name' of null

Możemy się przed tym łatwo zabezpieczyć.

const cat = null

const catsName = cat && cat.name // zwraca 'null' ale nie błąd

Możemy jeszcze dopisać, że jeśli pobranie nazwy obiektu „cat” się nie uda to nadaj mu wartość domyślną, np. „Mruczek”

const cat = null

const catsName = cat && cat.name || "Mruczek"

Tak jak widać, proste operatory a możemy użyć je w już niekoniecznie prosty sposób. Zachęcam do obejrzenia wideo z początku wpisu, tam staram się to dokładniej opisać:)