Podstawy JavaScript: operatory trójskładnikowe

Mar 23 2023
Co to jest operator trójskładnikowy? Operator trójskładnikowy służy do sprawdzania warunków w kodzie zamiast instrukcji if…else. Jest również nazywany operatorem warunkowym i sprawia, że ​​kod jest znacznie krótszy i łatwiejszy do odczytania (w większości przypadków).
Zdjęcie Tsvetoslav Hristov na Unsplash

Co to jest operator trójskładnikowy?

Operator trójskładnikowy służy do sprawdzania warunków w kodzie zamiast instrukcji if…else. Jest również nazywany operatorem warunkowym i sprawia, że ​​kod jest znacznie krótszy i łatwiejszy do odczytania (w większości przypadków).

Składnia

Rzućmy okiem na składnię operatora trójskładnikowego:

condition ? trueExpression : falseExpression

condition — stan, który oceniasz. Np.: Czy wiek > 5 lat.

trueExpression: tak powinno się stać, jeśli conditionjesttrue.

falseExpression: tak powinno się stać, jeśli conditionjestfalse.

Przykład

Poniżej znajduje się przykład użycia instrukcji if…else sprawdzającej, czy samochód powinien się poruszać w zależności od koloru sygnalizacji świetlnej.

let color = ‘red’; // color of the traffic light
let carMovement;

if (color === 'red') {
  carMovement = 'stop';
} else {
  carMovement = 'go';
}

console.log(carMovement); //stop

let color = 'red'; // color of the traffic light
let carMovement = color === red ? 'stop' : 'go';

console.log(carMovement); //stop

Możesz także zagnieździć lub połączyć jeden operator trójskładnikowy jako wyrażenie wewnątrz innego operatora trójskładnikowego. Poniżej znajduje się przykład sprawdzania, czy liczba jest dodatnia, ujemna czy zero:

let num = 2;
let result = num >= 0 ? num === 0 ? 'zero' : 'positive' : 'negative';

console.log(result); //positive

let num = 2;
let result = (num >= 0) ? (num === 0 ? "zero" : "positive") : "negative";

console.log(result); //positive

Kiedy należy używać operatorów trójskładnikowych?

Podobnie jak w powyższym przykładzie, operatory trójskładnikowe mogą skracać kod, ale przy użyciu złożonych zagnieżdżonych operatorów trójskładnikowych powodują, że kod jest mniej czytelny i bardziej zagmatwany.

Praktyczną zasadą byłoby zastanowienie się, czy ktoś inny w ciągu najbliższych 2 lat będzie w stanie z łatwością przeczytać i zrozumieć Twój kod. Jeśli odpowiedź brzmi „nie”, zamiast tego użyj instrukcji if…else.

Wskazówka: jeśli używasz ESlint, całkowicie zabrania on używania zagnieżdżonych operatorów trójskładnikowych!

Wniosek

Operatory trójskładnikowe błyszczą tylko wtedy, gdy ułatwiają odczytanie, zrozumienie i utrzymanie kodu. Nie chodzi tylko o skrócenie kodu, więc używaj ich efektywnie.