Skip to content
Devstock Academy
  • O nas
  • Moduły Akademii
    • Moduł 1 – Podstawy programowania
    • Moduł 2 – React.js
    • Moduł 3 – Next.js
    • Moduły 4-6
  • Blog
  • Kontakt
  • O nas
  • Moduły Akademii
    • Moduł 1 – Podstawy programowania
    • Moduł 2 – React.js
    • Moduł 3 – Next.js
    • Moduły 4-6
  • Blog
  • Kontakt
Dołącz do społeczności
Devstock Academy Banner
Programowanie i Technologie Webowe

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

  • 13 paź, 2024
  • Komentarze 0
operatory logiczne operatory logiczne js

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

Kurs programowania z gwarancją pracy - banner

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.

Tabela prawdy operatora and - operatory logiczne javascript, operatory logiczne js

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.

Tabela prawdy operatora or - operatory logiczne javascript operatory logiczne js

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.

Porównanie truthu i falsy w js - operatory logiczne javascript operatory logiczne js
Infografika pokazującą różnice między wartościami truthy i falsy w JavaScript.

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

Udostępnij na:
Operator trójargumentowy (ternary operator) w JavaScript – jak uprościć warunki w kodzie
Jak zacząć robić stronę internetową: Kompleksowy przewodnik krok po kroku

Zostaw komentarz :) Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Dołącz do społeczności DEVSTOCK - banner reklamowy

Najnowsze wpisy

Thumb
Agent AI – przyszłość automatyzacji zadań. Co
04 lip, 2025
Thumb
Jak uczyć się AI samodzielnie? Poradnik dla
02 lip, 2025
Thumb
Jak AI zmienia tworzenie aplikacji i cyfrowych
01 lip, 2025

Kursy Samodzielne

  • Kurs HTML - obrazek wyróżniający
    Kurs HTML – Zbuduj strukturę swojej pierwszej strony internetowej
    99,00 zł Pierwotna cena wynosiła: 99,00 zł.49,00 złAktualna cena wynosi: 49,00 zł.
  • Kurs CSS Podstawowy - obrazek wyróżniający
    Kurs CSS Podstawowy – Stwórz styl i układ swojej pierwszej strony internetowej
    99,00 zł Pierwotna cena wynosiła: 99,00 zł.49,00 złAktualna cena wynosi: 49,00 zł.
  • Kurs CSS Zaawansowany - obrazek wyróżniający
    Kurs CSS Zaawansowany – Opanuj nowoczesne techniki stylowania i układu
    99,00 zł Pierwotna cena wynosiła: 99,00 zł.49,00 złAktualna cena wynosi: 49,00 zł.
  • Kurs JS od podstaw - obrazek wyróżniający
    Kurs JavaScript od podstaw
    149,00 zł Pierwotna cena wynosiła: 149,00 zł.99,00 złAktualna cena wynosi: 99,00 zł.
  • Kurs JavaScript zaawansowany - obrazek wyróżniający
    Kurs JavaScript zaawansowany
    149,00 zł Pierwotna cena wynosiła: 149,00 zł.99,00 złAktualna cena wynosi: 99,00 zł.
klarna raty 0% - banner
Droga do kariery z Akademią Devstock
Banner reklamowy whitepress

Tagi

5G AI Architektura Cyberbezpieczeństwo Feedback Frontend Git IoT JavaScript Motywacja Nauka efektywna Optymalizacja i wydajność Programowanie React.JS Rozwój osobisty WebDevelopment
Logo FitBody Center Warszawa
Dołącz do społeczności DEVSTOCK - banner reklamowy

Produkty

  • Kurs HTML - obrazek wyróżniający
    Kurs HTML – Zbuduj strukturę swojej pierwszej strony internetowej
    99,00 zł Pierwotna cena wynosiła: 99,00 zł.49,00 złAktualna cena wynosi: 49,00 zł.
  • Kurs CSS Podstawowy - obrazek wyróżniający
    Kurs CSS Podstawowy – Stwórz styl i układ swojej pierwszej strony internetowej
    99,00 zł Pierwotna cena wynosiła: 99,00 zł.49,00 złAktualna cena wynosi: 49,00 zł.
  • Kurs CSS Zaawansowany - obrazek wyróżniający
    Kurs CSS Zaawansowany – Opanuj nowoczesne techniki stylowania i układu
    99,00 zł Pierwotna cena wynosiła: 99,00 zł.49,00 złAktualna cena wynosi: 49,00 zł.
  • Kurs JS od podstaw - obrazek wyróżniający
    Kurs JavaScript od podstaw
    149,00 zł Pierwotna cena wynosiła: 149,00 zł.99,00 złAktualna cena wynosi: 99,00 zł.
  • Kurs JavaScript zaawansowany - obrazek wyróżniający
    Kurs JavaScript zaawansowany
    149,00 zł Pierwotna cena wynosiła: 149,00 zł.99,00 złAktualna cena wynosi: 99,00 zł.

Odkryj zabiegi Endermologii LPG Infinity w FitBody Center Warszawa

Maszyna zabiegowa - endermologia lpg infinity
Group-5638-1

Devstock – Akademia programowania z gwarancją pracy

🏠 ul. Bronowska 5a,
03-995 Warszawa
📞 +48 517 313 589
✉️ contact@devstockacademy.pl

Linki

  • Poznaj firmę Devstock
  • Wejdź do społeczności Devstock
  • Polityka prywatności
  • Regulamin

FitBody Center

Strona

  • Strona główna
  • Kontakt

Newsletter

Bądź na bieżąco, otrzymuj darmową wiedzę i poznaj nas lepiej!


Icon-facebook Icon-linkedin2 Icon-instagram Icon-youtube Tiktok
Copyright 2025 Devstock. Wszelkie prawa zastrzeżone
Devstock AcademyDevstock Academy
Sign inSign up

Sign in

Don’t have an account? Sign up
Lost your password?

Sign up

Already have an account? Sign in

Zacznij kodować od zera – za 0 zł

Dołącz do społeczności Devstock i zgarnij 14 dni darmowego dostępu do naszej Akademii – pełnej lekcji, zadań, quizów i grywalizacji.

Przetestuj wszystko na luzie – bez zobowiązań.

  • 🟨 Nauka od podstaw, nawet jeśli nigdy nie kodował_ś
  • 🟨 Wszystko krok po kroku, jasno i praktycznie
  • 🟨 Idealna baza pod AI, automatyzacje i projekty
  • 🟨 Bez zobowiązań – testuj i ucz się we własnym tempie
CHCĘ DOSTĘP ZA 0 ZŁ – SPRAWDZAM!
SPRAWDZAM ZA 0 ZŁ!