Skip to content

⏰ PRZEDSPRZEDAŻ - Kurs Automatyzacji z n8n 2.0

Sprawdź ofertę →

⏰ PRZEDSPRZEDAŻ ⏰

Kurs Automatyzacji n8n

Sprawdź
devstock logo
  • O nas
  • Moduły Akademii
    • Moduł 1
    • Moduł 2
    • Moduł 3
    • Pozostałe moduły
  • Kursy AI
    • Pierwsza Misja AI (darmowy)
    • Automatyzacje z n8n 2.0
  • Blog
  • Kontakt
  • O nas
  • Moduły Akademii
    • Moduł 1
    • Moduł 2
    • Moduł 3
    • Pozostałe moduły
  • Kursy AI
    • Pierwsza Misja AI (darmowy)
    • Automatyzacje z n8n 2.0
  • Blog
  • Kontakt
Kurs Automatyzacji z n8n - banner reklamowy
Programowanie i Technologie Webowe

Operator trójargumentowy (ternary operator) w JavaScript – jak uprościć warunki w kodzie

  • 13 paź, 2024
  • Komentarze 0
teranry operator operator trójargumentowy

Chcesz poznać sposób na uproszczenie instrukcji warunkowych w swoim kodzie? JS ternary operator, czyli operator trójargumentowy w JavaScript, pozwala na zwięzłe i czytelne zapisywanie warunków. W tym artykule omówimy, jak działa operator ternarny, przedstawimy jego składnię oraz pokażemy praktyczne przykłady zastosowania.

Czym jest operator trójargumentowy w JavaScript?

Operator trójargumentowy, znany również jako operator warunkowy, to skrócona forma instrukcji if...else. Umożliwia on zapisanie warunku, który zwraca jedną z dwóch wartości w zależności od spełnienia określonego kryterium.

Składnia operatora ternarnego:

warunek ? wyrażenieJeśliPrawda : wyrażenieJeśliFałsz;
  • warunek – wyrażenie logiczne, które zostanie ocenione jako prawda lub fałsz.

  • wyrażenieJeśliPrawda (exprIfTrue) – wartość lub wyrażenie zwracane, gdy warunek jest prawdziwy.

  • wyrażenieJeśliFałsz (exprIfFalse) – wartość lub wyrażenie zwracane, gdy warunek jest fałszywy.

Jak działa operator ternarny?

Operator ternarny działa na zasadzie oceny warunku i zwrócenia odpowiedniej wartości:

  • Jeśli warunek jest prawdziwy, zwraca wyrażenieJeśliPrawda.

  • Jeśli warunek jest fałszywy, zwraca wyrażenieJeśliFałsz.

Przykład:

let wiek = 18;
let status = (wiek >= 18) ? 'Dorosły' : 'Niepełnoletni';
console.log(status); // Wyświetli "Dorosły"

W powyższym przykładzie, jeśli zmienna wiek jest większa lub równa 18, zmienna status otrzyma wartość 'Dorosły', w przeciwnym razie 'Niepełnoletni'.

Dokumentacja operatora warunkowego na MDN Web Docs

Kurs programowania z gwarancją pracy - banner

Zastosowanie operatora ternarnego w praktyce

Uproszczenie instrukcji if...else

Tradycyjna instrukcja if...else:

let liczba = 10;
let wynik;

if (liczba % 2 === 0) {
  wynik = 'Parzysta';
} else {
  wynik = 'Nieparzysta';
}

console.log(wynik); // Wyświetli "Parzysta"

Z użyciem operatora ternarnego:

let liczba = 10;
let wynik = (liczba % 2 === 0) ? 'Parzysta' : 'Nieparzysta';
console.log(wynik); // Wyświetli "Parzysta"

Przypisanie wartości do zmiennej

Operator ternarny jest często używany do przypisywania wartości do zmiennych na podstawie warunków.

Przykład:

let user = {
  imie: 'Anna',
  premium: true
};

let poziomUżytkownika = user.premium ? 'Premium' : 'Standard';
console.log(poziomUżytkownika); // Wyświetli "Premium"

Wywołanie funkcji na podstawie warunku

function powitanie() {
  console.log('Witaj!');
}

function pozegnanie() {
  console.log('Do zobaczenia!');
}

let godzina = 10;
(godzina < 12) ? powitanie() : pozegnanie(); // Wyświetli "Witaj!"
Schemat blokowy jak działa js ternary operator operator trójargumentowy, operator ternary
Diagram ilustrujący działanie operatora ternarnego w postaci schematu blokowego.

Zagnieżdżone operatory ternarne

Używanie operatora ternarnego w sposób zagnieżdżony pozwala na obsługę wielu warunków. Należy jednak zachować ostrożność, aby kod pozostał czytelny.

Przykład:

let ocena = 85;
let wynik = (ocena >= 90) ? 'A' :
            (ocena >= 80) ? 'B' :
            (ocena >= 70) ? 'C' :
            (ocena >= 60) ? 'D' : 'F';

console.log(wynik); // Wyświetli "B"

W powyższym przykładzie operator ternarny zwraca ocenę literową na podstawie wartości punktowej.

Wskazówka: Jeśli zagnieżdżone operatory ternarne stają się zbyt skomplikowane, warto rozważyć użycie instrukcji switch lub if...else dla lepszej czytelności.

Operator ternarny a operator warunkowy

Warto zauważyć, że operator ternarny jest jedynym operatorem w JavaScript, który przyjmuje trzy argumenty, stąd nazwa operator trójargumentowy. Często jest on również nazywany operatorem warunkowym lub conditional operator.

Praktyczne porady

  • Czytelność kodu: Używaj operatora ternarnego do prostych warunków. W przypadku złożonych logik lepiej zastosować tradycyjne instrukcje warunkowe.

  • Unikaj nadmiernego zagnieżdżania: Zbyt wiele zagnieżdżonych operatorów ternarnych może uczynić kod trudnym do zrozumienia.

  • Przypisywanie wartości: Operator ternarny jest idealny do przypisywania wartości na podstawie warunku.

Alternatywy dla operatora ternarnego

W niektórych przypadkach zamiast operatora ternarnego można użyć innych konstrukcji:

  • Instrukcja if...else: Dla bardziej rozbudowanych warunków.

  • Instrukcja switch: Przy wielu możliwych wartościach jednej zmiennej.

Podsumowanie

JS ternary operator, czyli operator trójargumentowy w JavaScript, to potężne narzędzie pozwalające na uproszczenie i skrócenie kodu. Pozwala na zwięzłe zapisywanie warunków i jest szczególnie przydatny przy przypisywaniu wartości na podstawie prostych kryteriów. Pamiętaj jednak, aby używać go z rozwagą, dbając o czytelność i zrozumiałość swojego kodu.

Tabela porównująca instrukcję if else i js ternary operator operator trójargumentowy, operator ternary

Zapraszamy do dalszego odkrywania tajników JavaScript i doskonalenia swoich umiejętności programistycznych. Im lepiej zrozumiesz narzędzia oferowane przez język, tym efektywniej będziesz tworzyć czysty i zrozumiały kod.

Udostępnij na:
Funkcje w JavaScript – jak działają i jak je tworzyć
Operatory logiczne w JavaScript – jak działają i kiedy ich używać

Zostaw komentarz :) Anuluj pisanie odpowiedzi

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

Grafika promocyjna kursu z tytułem "KURS – AUTOMATYZACJE I BUDOWANIE AGENTÓW AI" z wyraźnym oznaczeniem narzędzia "n8n 2.0".

Najnowsze wpisy

Thumb
Proces tworzenia dedykowanej strony internetowej w TYPO3
13 mar, 2026
Thumb
Odkryj potencjalne zagrożenia – biały wywiad OSINT
02 mar, 2026
Thumb
Ranking: TOP 5 Software House’ów tworzących dedykowane
23 lut, 2026
Thumb
n8n Cloud – najszybszy sposób, by uruchomić
12 lut, 2026
Thumb
Jaki procesor kupić do gier, pracy i
10 lut, 2026

Kategorie

  • Aktualności i Wydarzenia (17)
  • Bezpieczeństwo i Jakość (11)
  • Branża IT i Nowe Technologie (25)
  • Design i User Experience (4)
  • Narzędzia i Automatyzacja (42)
  • Programowanie i Technologie Webowe (74)
  • Rozwój kariery i Edukacja (31)
Baner reklamowy odzyskaj 10h tygodniowo
Droga do kariery z Akademią Devstock
Banner reklamowy- system AI pracuje gdy śpisz

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

Odkryj zabiegi Endermologii LPG Infinity w FitBody Center Warszawa

Maszyna zabiegowa - endermologia lpg infinity

Archiwa

  • marzec 2026
  • luty 2026
  • styczeń 2026
  • grudzień 2025
  • listopad 2025
  • październik 2025
  • wrzesień 2025
  • sierpień 2025
  • lipiec 2025
  • czerwiec 2025
  • maj 2025
  • kwiecień 2025
  • marzec 2025
  • listopad 2024
  • październik 2024
  • wrzesień 2024
  • sierpień 2024
  • czerwiec 2024
  • maj 2024
  • kwiecień 2024
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 2026 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