Operatory logiczne w JavaScript – jak działają i kiedy ich używać

Czy kiedykolwiek zastanawiałeś się, jak operatory logiczne JavaScript wpływają na działanie Twojego kodu? Operatory takie jak AND (&&), OR (||) i NOT (!) są kluczowe w podejmowaniu decyzji w programowaniu. W tym artykule omówimy, jak działają te operatory logiczne w JavaScript, kiedy ich używać oraz przedstawimy praktyczne przykłady zastosowania. # operatory logiczne js

JavaScript – co to jest i jak zacząć naukę?

Co to są operatory logiczne?

Operatory logiczne służą do łączenia lub negowania wyrażeń logicznych, które zwracają wartość true (prawda) lub false (fałsz). W JavaScript dostępne są trzy główne operatory logiczne:

• AND (&&) – zwraca true, jeśli oba operandy są prawdziwe.

• OR (||) – zwraca true, jeśli przynajmniej jeden z operandów jest prawdziwy.

• NOT (!) – neguje wartość logiczną; zamienia true na false i odwrotnie.

Dokumentacja operatorów logicznych na MDN Web Docs

Operator AND (&&)

Jak działa operator AND?

Operator && zwraca true tylko wtedy, gdy oba wyrażenia po jego lewej i prawej stronie są prawdziwe.

Składnia:

javascripwyrazenie1 && wyrazenie2

Przykład:

let wiek = 25;
let posiadaPrawoJazdy = true;

if (wiek >= 18 && posiadaPrawoJazdy) {
  console.log("Możesz prowadzić samochód.");
} else {
  console.log("Nie możesz prowadzić samochodu.");
}

W tym przykładzie komunikat “Możesz prowadzić samochód.” zostanie wyświetlony tylko wtedy, gdy obie zmienne spełniają warunek.

Operator OR (||)

Jak działa operator OR?

Operator || zwraca true jeśli przynajmniej jedno z wyrażeń jest prawdziwe.

Składnia:

wyrazenie1 || wyrazenie2

Przykład:

let dzienTygodnia = "Sobota";

if (dzienTygodnia === "Sobota" || dzienTygodnia === "Niedziela") {
  console.log("Dzisiaj jest weekend.");
} else {
  console.log("Dzisiaj jest dzień roboczy.");
}

Jeśli dzienTygodnia jest “Sobota” lub “Niedziela”, zostanie wyświetlony komunikat o weekendzie.

Operator NOT (!)

Jak działa operator NOT?

Operator ! neguje wartość logiczną wyrażenia. Jeśli wyrażenie zwraca true, to ! zamieni je na false, i odwrotnie.

Składnia:

!wyrazenie

Przykład:

let jestZalogowany = false;

if (!jestZalogowany) {
  console.log("Proszę się zalogować.");
} else {
  console.log("Witaj ponownie!");
}

Ponieważ jestZalogowany jest false, operator ! zmieni go na true, więc zostanie wyświetlony komunikat “Proszę się zalogować.”

Łączenie operatorów logicznych

Operatory logiczne można łączyć, aby tworzyć bardziej złożone warunki.

Przykład:

let wiek = 20;
let posiadaBilet = true;
let jestStudentem = false;

if ((wiek >= 18 && posiadaBilet) || jestStudentem) {
  console.log("Możesz wejść na koncert.");
} else {
  console.log("Nie spełniasz warunków wejścia.");
}

W tym przypadku osoba może wejść na koncert, jeśli ma co najmniej 18 lat i posiada bilet lub jest studentem.

Kolejność wykonywania operatorów

W JavaScript operatory logiczne mają określoną kolejność wykonywania:

1. Operator NOT (!)

2. Operator AND (&&)

3. Operator OR (||)

Możemy użyć nawiasów, aby wymusić inną kolejność lub zwiększyć czytelność kodu.

Przykład:

if (!(wiek < 18) && (posiadaBilet || jestVIP)) {
  // kod
}

Krótkie spięcie (Short-circuit evaluation)

JavaScript wykorzystuje mechanizm krótkiego spięcia, co oznacza, że wyrażenie logiczne przestaje być oceniane, gdy wynik jest już znany.

Dla operatora AND (&&):

Jeśli pierwsze wyrażenie jest false, to całe wyrażenie będzie false, więc drugie wyrażenie nie jest oceniane.

Przykład:

function funkcjaA() {
  console.log("Funkcja A");
  return false;
}

function funkcjaB() {
  console.log("Funkcja B");
  return true;
}

if (funkcjaA() && funkcjaB()) {
  // kod
}

W tym przypadku zostanie wyświetlone tylko “Funkcja A”, ponieważ funkcjaA() zwraca false.

Dla operatora OR (||):

Jeśli pierwsze wyrażenie jest true, to całe wyrażenie będzie true, więc drugie wyrażenie nie jest oceniane.

Praktyczne zastosowania operatorów logicznych

Walidacja formularzy

let poleImie = "Jan";
let poleEmail = "";

if (poleImie !== "" && poleEmail !== "") {
  console.log("Formularz został wypełniony poprawnie.");
} else {
  console.log("Proszę wypełnić wszystkie pola.");
}

Sprawdzanie uprawnień

let rolaUzytkownika = "admin";
let jestZalogowany = true;

if (jestZalogowany && (rolaUzytkownika === "admin" || rolaUzytkownika === "moderator")) {
  console.log("Masz dostęp do panelu administracyjnego.");
} else {
  console.log("Nie masz uprawnień.");
}

Uważaj na wartości falsy i truthy

W JavaScript niektóre wartości są traktowane jako false (falsy), a inne jako true (truthy) w kontekście logicznym.

Wartości falsy:

• false

• 0

• "" (pusty string)

• null

• undefined

• NaN

Przykład:

let nazwaUzytkownika = "";

if (!nazwaUzytkownika) {
  console.log("Nazwa użytkownika jest wymagana.");
}

Operatory logiczne w przypisaniach

Operatory logiczne mogą być używane do przypisywania wartości.

Przykład z operatorem OR (||):

let ustawieniaUzytkownika = null;
let ustawieniaDomyslne = { tema: "jasny" };

let ustawienia = ustawieniaUzytkownika || ustawieniaDomyslne;
console.log(ustawienia); // Zwróci { tema: "jasny" }

Jeśli ustawieniaUzytkownika jest null lub undefined, zostaną użyte ustawieniaDomyslne.

Podsumowanie

Operatory logiczne są niezbędnym narzędziem w JavaScript do podejmowania decyzji i sterowania przepływem programu. Zrozumienie, jak działają operatory logiczne JavaScript, pozwala pisać bardziej efektywny i czytelny kod. Pamiętaj o kolejności wykonywania operatorów i mechanizmie krótkiego spięcia, aby unikać nieoczekiwanych zachowań w swoim kodzie.

Zapraszamy do dalszej nauki i eksplorowania świata JavaScript. Im lepiej zrozumiesz podstawowe mechanizmy języka, tym bardziej efektywnym programistą się staniesz. # operatory logiczne js