Lekcja 7 Operatory Logiczne JavaScript

Operatory i wartości logiczne w JavaScripcie (truthy/falsy, &&, ||, !, ??)

W JavaScripcie „logika” to nie tylko true i false. Wiele wartości może zachowywać się jak prawda
lub fałsz, a operatory takie jak &&, ||, ! i ?? potrafią zwracać
różne typy danych (nie zawsze boolean!). Ten artykuł pokazuje najważniejsze zasady i typowe pułapki.

1) Typ boolean: true i false

Typ logiczny (boolean) ma tylko dwie wartości: true (prawda) i false (fałsz).
Najczęściej otrzymujesz go w wyniku porównań:

console.log(5 > 3);   // true
console.log(5 === 3); // false
console.log(5 !== 3); // true

2) Truthy i falsy – czyli „co zachowuje się jak prawda?”

W instrukcjach warunkowych (if, while) JavaScript wykonuje tzw. konwersję do boolean
(tzw. Boolean coercion). Niektóre wartości są traktowane jak fałsz (falsy), a reszta jak prawda
(truthy).

Falsy (najważniejsze do zapamiętania)

  • false
  • 0 oraz -0
  • 0n (BigInt zero)
  • "" (pusty string)
  • null
  • undefined
  • NaN

Wszystko inne jest truthy, np. "0", " ", [], {}:

if ("0") console.log("To się wykona"); // wykona się (string z jednym znakiem jest truthy)
if ([])  console.log("To też");        // wykona się (pusta tablica jest truthy)

Jeśli chcesz jawnie sprawdzić konwersję do boolean, użyj Boolean(x) albo podwójnego zaprzeczenia !!x.

console.log(Boolean(""));   // false
console.log(Boolean("hi")); // true
console.log(!!0);           // false
console.log(!!42);          // true

3) Operatory porównania: === vs ==

Najważniejsza zasada: w praktyce używaj zawsze === i !== (porównanie ścisłe).
Operator == wykonuje konwersję typów i bywa źródłem błędów.

console.log(0 == false);   // true  (konwersja!)
console.log(0 === false);  // false (inne typy)
console.log("5" == 5);     // true
console.log("5" === 5);    // false

Wyjątek, który często warto znać: null i undefined są „luźno równe” tylko sobie:

console.log(null == undefined);  // true
console.log(null === undefined); // false

4) Operatory logiczne: &&, ||, !

4.1) Zaprzeczenie !

! odwraca wartość logiczną po konwersji do boolean.

console.log(!true);     // false
console.log(!0);        // true  (bo 0 jest falsy)
console.log(!"hello");  // false (bo string jest truthy)

4.2) AND && – zwraca pierwszy falsy albo ostatnią wartość

&& nie musi zwracać true/false. Zwraca:
pierwszą wartość falsy (jeśli istnieje), a jeśli wszystkie są truthy – zwraca ostatnią.
Działa to z tzw. krótkim spięciem (short-circuit): jeśli wynik jest już pewny, dalszy kod nie zostanie wykonany.

console.log("OK" && 123);   // 123
console.log(0 && "X");       // 0
console.log(null && "X");    // null

Popularny wzorzec: wykonaj coś tylko gdy warunek jest prawdziwy:

const user = { name: "Ala" };
user && console.log(user.name); // wypisze "Ala"

4.3) OR || – zwraca pierwszy truthy albo ostatnią wartość

|| również zwraca nie boolean, tylko:
pierwszą wartość truthy, a jeśli żadnej nie ma – zwraca ostatnią (falsy).

console.log("" || "domyślna"); // "domyślna"
console.log("A" || "B");       // "A"
console.log(0 || 99);          // 99 (uwaga na 0!)

I tu pojawia się typowa pułapka: jeśli 0 albo "" są poprawnymi wartościami, || może je „nadpisać” domyślną.
Wtedy lepiej użyć ??.

5) Operator nullish coalescing: ?? (bezpieczne wartości domyślne)

?? zwraca prawą stronę tylko wtedy, gdy lewa strona to null lub undefined.
Nie traktuje 0 ani "" jako „braku wartości”.

console.log(0 ?? 99);        // 0
console.log("" ?? "X");      // ""
console.log(null ?? "X");    // "X"
console.log(undefined ?? 7); // 7

Przykład praktyczny: ustawienie domyślnego limitu, ale pozwolenie na 0.

function pobierzLimit(limit) {
  return limit ?? 10;
}
console.log(pobierzLimit(0));        // 0
console.log(pobierzLimit(undefined)); // 10

6) Opcjonalne łączenie: ?. (bez błędów przy braku obiektu)

Operator ?. pozwala bezpiecznie sięgać w głąb obiektu. Gdy po drodze trafi się null lub undefined,
wyrażenie zwróci undefined zamiast rzucać wyjątek.

const user = null;
// Bez ?. to by wywaliło błąd:
// console.log(user.name);
console.log(user?.name); // undefined

To często używa się razem z ??:

const user2 = { profile: { nick: "mike" } };
const nick = user2?.profile?.nick ?? "gość";
console.log(nick); // "mike"

7) Typowe „pułapki” i dobre nawyki

  • Używaj === i !== zamiast == / !=.
  • Pamiętaj, że && i || zwracają wartości, niekoniecznie boolean.
  • Nie używaj || do domyślnych wartości, jeśli 0 lub pusty string są poprawne — wtedy wybierz ??.
  • Stosuj ?., gdy obiekt może nie istnieć (np. dane z API).
  • Gdy potrzebujesz realnego boolean, użyj Boolean(x) lub !!x.

Podsumowanie

Wartości logiczne w JS to coś więcej niż true/false. Zrozumienie truthy/falsy i zachowania
operatorów &&, ||, !, ?? oraz ?. sprawia,
że kod staje się krótszy, czytelniejszy i mniej podatny na błędy.

Koszyk