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)
false0oraz-00n(BigInt zero)""(pusty string)nullundefinedNaN
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.