Jak stosować operatory logiczne && i || w JavaScript?

Operatory logiczne w JavaScript służą do łączenia wielu wyrażeń warunkowych.
Operator && (AND) zwraca true tylko wtedy, gdy obie strony porównania są prawdziwe. Operator || (OR) zwraca true, gdy przynajmniej jedna strona porównania jest prawdziwa. Zrozumienie tych operatorów jest kluczowe dla efektywnego stosowania instrukcji warunkowych.

Operator AND (&&)

Operator && zwraca true tylko wtedy, gdy oba porównywane wyrażenia są true po obu stronach tego operatora.

console.log(true && true); // Wynik: true, bo prawda po obu stronach
console.log(true && false); // Wynik: false, bo nie ma prawdy po obu stronach
console.log(false && true); // Wynik: false, ponieważ jedna strona jest fałszywa
console.log(false && false); // Wynik: false, obie strony są fałszywe

Operator and czyli && ma prostą zasadę działania, zwróci wartość true jeśli oba wyrażenia też dają prawdę. Oczywiście tylko pierwsza linijka zwróć true do konsoli bo tylko w niej po obu stronach && mamy prawdę. W reszce przypadków otrzymamy false jako wynik.

Operator and najczęściej stosujemy z instrukcjami if aby za jednym razem sprawdzić dwa warunki dzięki czemu kod staje się prostszy i bardziej czytelny:

let age = 20;
let hasPermission = true;

// Użycie AND
if (age > 18 && hasPermission) {
    console.log("Dostęp dozwolony."); // Wykonuje się, bo oba warunki są spełnione
} 


age = 17; // zmieniamy wartość age
// instrukcja if się nie wykona bo lewa strona daje false
if (age > 18 && hasPermission) {
    // Ten blok kodu nie wykona się!
    console.log("Dostęp dozwolony."); 
} 

Operator OR (||)

Operator || który zapisujemy za pomocą dwóch znaków pipe zwraca true, gdy co najmniej jedno z porównywanych wyrażeń jest true. Zwróci false jeśli obie strony wyrażenia dają false.

console.log(true || true); // Wynik: true, obie strony są prawdziwe
console.log(true || false); // Wynik: true, jedna strona jest prawdziwa
console.log(false || true); // Wynik: true, jedna strona jest prawdziwa
console.log(false || false); // Wynik: false, bo obie strony są fałszywe

Poniżej przykład z instrukcją if:

let topSpeed = 200;
let hasTurbo = false;

// Użycie OR
if (topSpeed > 160 || hasTurbo ) {
    // Wykona się, bo przynajmniej jeden 
    // warunek jest spełniony
    console.log("Kupujemy."); 
}  

topSpeed = 120;
if (topSpeed > 160 || hasTurbo ) {
    // NIE Wykona się, bo obie strony wyrażenia dają false
    console.log("Blok się nie wykona."); 
}  

Łączenie operatorów

Dzięki && i || możemy połączyć kilka warunków w jeden i uprościć nasz kod. Nie musimy stosować wielu instrukcji if do sprawdzenia warunków:

let age = 20;
let hasTicket = false;
let isVIP = true;

// Łączenie AND i OR
// Lewa strona czyli age > 18 && hasTicket daje false
// ale prawa strona czyli isVip jest true, więc porównując
// false || true ostatecznie mamy prawdę
// i blok kodu się wykona
if ((age > 18 && hasTicket) || isVIP) {
    // Wykona się, bo użytkownik jest VIP, nawet bez biletu
    console.log("Witamy na koncercie!"); 
}  

Zauważ że w powyższym przykładzie zastosowane są dodatkowe nawiasy okrągłe, nie są tutaj obowiązkowe, zwiększają czytelność przykładu. Interpreter JavaScript czyta warunki do sprawdzenia od lewej do prawej, więc najpierw sprawdza wynik operatora &&. AND zwróci false bo lewa strona && daje false. Następnie interpreter przechodzi do operatora ||, po jego lewej stronie mamy już obliczony wynik false, a po prawej jest true. W takim wypadku dla || jeśli jest chociaż jedna prawda to zwróci na końcu true do instrukcji if, dzięki czemu blok kodu zostanie wykonany.

Podsumowanie

Operatory logiczne AND (&&) i OR (||) pozwalają na tworzenie skomplikowanych warunków w prosty sposób, zwiększając elastyczność i czytelność kodu. Ich właściwe zrozumienie i stosowanie są niezbędne do efektywnego kontrolowania przepływu programu w JavaScript. O ile na początku ich stosowanie może wydawać się skomplikowane dla początkujących programistów to z czasem docenimy ich możliwości, gdyż znacząco przyśpieszają pisanie kodu.

Jeżeli chcesz przyśpieszyć swoją naukę chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.