W programowaniu instrukcje warunkowe służą do decydowania o przebiegu wykonywanego kodu na podstawie różnych warunków podanych w danych wejściowych.

W każdym języku programowania mamy do dyspozycji przynajmniej kilka rodzajów instrukcji warunkowych.

JavaScript udostępnia następujące instrukcje warunkowe:

  • if
  • if ... else
  • if ... else if
  • switch

Istnieją trzy formy instrukcji if w JavaScript. Wszystkie instrukcje if w JavaScript są wykonywane z góry na dół.

Instrukcja if

Instrukcja if jest najprostszą instrukcją warunkową oraz najczęściej używaną instrukcją w JavaScript. Służy do decydowania, czy określony kod zostanie wykonany, czy nie.

if (warunek) {
	// kod, który zostanie wykonany, gdy warunek będzie prawdziwy
}

JavaScript wykonuje wyrażenie znajdujące się w nawiasach okrągłych. Warunek jest konwertowany na wartość true lub false. Jeśli określony warunek jest spełniony, wówczas blok instrukcji jest wykonywany.

if (godzina > 19) {
    console.log('Dobry wieczór');
}

Jeśli instrukcja składa się tylko z jednej linii do wykonania, nawiasy klamrowe można pominąć, natomiast jeśli instrukcja składa się z wielu linii kodu, nawiasy klamrowe są wymagane.

if (godzina > 19) 
    console.log('Dobry wieczór');

Jeśli nie użyjemy nawiasów klamrowych po warunku instrukcji if, wówczas JavaScript uzna, że ​​instrukcja znajdująca się bezpośrednio za nim należy do instrukcji warunkowej if.

Ogólnie dobrą praktyką jest zawsze stosowanie nawiasów klamrowych. Pomaga to w poprawieniu czytelności kodu i pozwala uniknąć wielu nieporozumień.

Instrukcje warunkowe if w JavaScript mogę być zagnieżdżone:

var znizka = 5;
if (czyNalezyDoGrupy) {
    znizka = 20;
    if (czyMaKodZnizkowy) {
        znizka = 30;
    }
}

instrukcja if … else

Instrukcja if ... else jest kolejną formą instrukcji warunkowej if. Pozwala podjąć decyzję o wykonaniu dwóch bloków kodu na podstawie jednego warunku.

if (warunek) {
	// kod, który zostanie wykonany, gdy warunek będzie prawdziwy
} else {
	// kod, który zostanie wykonany, gdy warunek będzie fałszywy
}

Instrukcja if ... else wykonuje instrukcję, jeśli określony warunek jest prawdziwy, natomiast jeśli warunek jest fałszywy wykona inną instrukcję.

if (godzina > 19) {
    console.log('Dobry wieczór');
} else {
    console.log('Dzień dobry');
}

instrukcja if … else if

Instrukcja if ... else if jest kolejną formą instrukcji warunkowej, która pozwala wykonywać instrukcje na postawie kilku warunków.

if (warunek1) {
    // kod, który zostanie wykonany, gdy warunek1 będzie prawdziwy
} else if (warunek2) {
    // kod, który zostanie wykonany, gdy warunek2 będzie prawdziwy
} else {
    // kod, który zostanie wykonany, gdy warunek1 i warunek2 będą fałszywe
}

Jeśli jeden z warunków instrukcji if jest prawdziwy, instrukcja powiązana z tym if jest wykonywana, a reszta warunków jest pomijana. Jeśli jednak pierwszy warunek nie jest prawdziwy, kolejny warunek jest sprawdzany. Jeśli żaden z warunków nie jest spełniony, zostanie wykonana ostatnia instrukcja else.

if (godzina < 19) {
    console.log('Dzień dobry');
} else if (godzina <= 24) {
	console.log('Dobry wieczór');
} else {
    console.log('Niepoprawna godzina');
}

Jeśli utworzymy wiele instrukcji if ... else if, kod będzie trudny do odczytania i z dłuższej perspektywy trudny do utrzymania. W takiej sytuacji powinniśmy użyć instrukcji switch.

Operator warunkowy

Tworząc instrukcje warunkowe w JavaScript możemy używać operatora warunkowego, zwanego także operatorem trójargumentowym lub trójelementowym, ponieważ akceptuje trzy operandy. Operator warunkowy jest krótszą wersją instrukcji if ... else.

var wynik = warunek ? wyrazenie1 : wyrazenie2;

Podobnie jak w przypadku instrukcji warunkowej if w JavaScript, warunek jest wyrażeniem, które zwraca wartość true lub false. Jeśli warunek jest prawdziwy, operator zwraca wartość wyrazenie1, w przeciwnym razie zwraca wartość wyrazenie2.

Instrukcja warunkowa może zostać użyta zarówno z nawiasami jak i bez nawiasów okrągłych.

var oplata = (czyNalezyDoGrupy) ? 20 : 5;

Jeśli operator warunkowy zwraca wyłącznie wartości logiczne, true oraz false:

var jestPelnoletni = wiek >= 18 ? true : false;

to można go zastąpić jego skróconą wersją:

var jestPelnoletni = wiek >= 18;

Dodatkowo nie jesteśmy ograniczeni do używania tylko jednego operatora warunkowe. Możemy używać kilku operatorów warunkowych jednocześnie:

var znizka = czyNalezyDoGrupy ? 20 :  czyMaKodZnizkowy ? 15 : 5; 

Warunek instrukcji

Wartość, którą przekazujemy, do instrukcji warunkowej if w JavaScript musi być albo wartością logiczną, albo zostanie zmieniona na wartość logiczną (wartości true lub false).

Pisząc instrukcje warunkowe możemy używać różnych metod porównania. Jednakże należy ostrożnie używać operatorów porównania.

Operator porównania i ścisłego porównania różnią się między sobą. W przypadku używania operatora ścisłego porównania(===) sprawdzane jest, czy zarówno wartości jak i typy danych są takie same.

console.log(1 === '1'); // false

W przypadku używania operatora porównania(==), jeśli porównywane wartości są innego typu, wartości są konwertowane na ten sam typ danych i dopiero wtedy wartości są porównywane.

console.log(1 == '1'); // true

W przypadku sprawdzania tylko jednej wartości, warto wiedzieć które, wartości konwertowane są na falsenull, undefined, 0, -0, '', NaN. Każda inna wartość jest konwertowana na true.

if (1) {
    console.log('Wartość jest prawdziwa');
}
if (0) {
    console.log('Wartość jest fałszywa');
}

Podsumowanie

  • instrukcje warunkowe służą do decydowania o przebiegu wykonywanego kodu na podstawie określonych warunków
  • W JavaScript mamy kilka instrukcji warunkowych:
    • if – jeśli określony warunek jest spełniony to wykonuje blok instrukcji
    • if ... else – wykonuje instrukcję, jeśli warunek jest spełniony, w przeciwnym wypadku wykonuje inną instrukcję
    • if ... else if – pozwala wykonywać instrukcję na podstawie kilku warunków
    • switch
  • nawiasy klamrowe można pominąć jeśli instrukcja if składa się tylko z jednej linii, aczkolwiek dobrą praktyką jest używanie nawiasów klamrowych
  • instrukcje warunkowe if w JavaScript mogą być zagnieżdżone
  • operator warunkowy jest skróconą formą instrukcji warunkowej if ... else
  • można używać sekwencji operatorów warunkowych
  • instrukcje warunkowe if w JavaScript konwertują warunek na wartość logiczną
  • operator porównania konwertuje wartości na ten sam typ i wtedy dokonuje porównania
  • operator ścisłego porównania porównuje wartości i typy danych
  • wartości, które są konwertowane na false to null, undefined, 0, -0, '' i NaN

Categories: javascript

0 Comments

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *