Instrukcje warunkowe

Jeżeli kupisz mi zabawkę, to nie będę płakał.

Powyższa wypowiedź to typowy warunek, który steruje działaniami rodziców. Tak samo Javascript udostępnia nam instrukcje warunkowe, które sterują przebiegiem naszego programu.

Instrukcja warunkowa wykonuje wybrany kod, w zależności czy wartość danego wyrażenia jest prawdą (true) czy fałszem (false).

if

Instrukcja if sprawdza dany warunek, i w zależności od tego czy zwróci true lub false wykona lub nie wykona sekcję kodu zawartą w klamrach:

Ogólna postać tego wyrażenia wygląda następująco:


if (warunek) {
    ...instrukcje jeżeli warunek jest poprany
}

Przykładowo:


const x = 1;
if (x == 1) {
    //warunek się wykona
    console.log('Liczba równa się 1');
}

const x = 2;
if (x != 2) {
    //kod się nie wykona, bo x = 2
    console.log('Liczba' +x+ 'jest różna od 2');
}

Wynikiem sprawdzenia każdego warunku jest wartość true lub false. Warunkiem wcale nie musi być równanie matematyczne (jak powyżej), ponieważ składowe warunku są konwertowane na wartość boolean (czyli przyjmują true/false).
Każda wartość zmiennej, różna od 0, pustego ciągu znaków i od wartości false da nam w wyniku true.


const x = 1;

if (x) { //true
    console.log('Tak');
} else {
    console.log('Nie')
}

//Tekst inny niż pusty "" jest równy true
const x = 'tekst';

if (x) { //true
    console.log('Tak');
} else {
    console.log('Nie');
}

//Liczba 0 to false, każda inna to true
const x = 0;


if (x) { //false
    console.log('Tak');
} else {
    console.log('Nie');
}

//pusty tekst to false
const x = '';

if (x) { //false
    console.log('Tak');
} else {
    console.log('Nie');
}

//undefined to false
let y;

if (y) { //false
    console.log('Tak');
} else {
    console.log('Nie');
}

//funkcje domyślnie zwracają undefined
//poniższa funkcja nie zwraca nic (nie ma return)
//wiec zwraca undefined
function our() {

}

//false
if (our()) {
    console.log('Tak');
} else {
    console.log('Nie');
}

Jeżeli po instrukcji if pominiemy nawiasy, wtedy będzie ona się tyczyć tylko kodu, który występuje bezpośrednio po tej instrukcji. Zasada ta działa także w przypadku pętli:


    if (a == 2) console.log("a jest równe 2");

    if (a === 3)
    console.log("Zmienna a jest równa 3 i musisz się z tym pogodzić");

    for (let i=0; i<5; i++)
        console.log("Jestem licznikiem: ", i);
    

Osobiście polecam jednak stosować klamry, bo zapis taki można łatwiej zrozumieć.

else

W zależności od sytuacji możemy możemy wykonać kod w przeciwieństwie do if poprzez zastosowanie instrukcji else:


const x = 5;

if (x == 1) {
    console.log('Liczba równa się 1')
} else {
    console.log('Liczba nie równa się 1')
}

else if

Istnieje też możliwość wykonywania kilku sprawdzeń pod rząd z wykorzystaniem instrukcji else if.


const x = 5;

if (x > 5) {
    console.log('Liczba jest większa od 5');
} else if (x < 5) {
    console.log('Liczba jest mniejsza od 5');
} else {
    console.log('Liczba równa się 5');
}

Zagnieżdżone if

Instrukcje warunkowe mogą być zagnieżdżone:


const x = 1;
const y = 2;

if (x > 0) {
    if (y > 0) {
        ...//jeżeli x > 0 i y > 0
    }
}

//to samo co powyżej
if (x > 0 && y > 0) {
    ...//kod wykonywany jeżeli liczba > 0 i druga_liczba > 0
}

const a = 1;
const b = 2;
const c = 3;

if (a > b && a > c) {
    console.log('a jest największe');
} else {
    if (b > c) {
        console.log('b jest największe');
    } else {
        console.log('c jest największe');
    }
}

const checkName = 1;
const name = "Ala";

if (checkName) {
    if (name === "Ala") {
        console.log("Imię zaczyna się na A");
    }
    if (name === "Beata") {
        console.log("Imię zaczyna się na B");
    }
    if (name === "Monika") {
        console.log("Imię zaczyna się na M");
    }
}

Operator warunkowy

Operator warunkowy, czyli tak naprawdę skrócona wersja warunku if ma postać:


const x = (wyrażenie) ? zwróć_jeżeli_wyrażenie_true : zwróć_jeżeli_wyrażenie_false

Wyrażenie if możemy zapisać w jego skróconej wersji:


const i = 1;
const number = '';

if (i > 0) {
    number = 'dodatnia';
} else {
    number = 'ujemna';
}


//to samo tylko w skróconej wersji
const number = (i > 0)? 'dodatnia' : 'ujemna';

Przykłady zastosowania:


const x = 3;
console.log( (x % 2 == 0)? 'parzysta' : 'nieparzysta' ) //wypisze 'nieparzysta'


const wiek = 21;
const status = (wiek < 18) ? "jesteś za młody" : "zapraszamy na seans" //wypisze się 'zapraszamy na seans'


const name = 'Ola';
console.log( (name == 'Ola') ? 'Masz na imię Ola' : 'Nie masz na imię Ola' ) //pokaże 'Masz na imię Ola'

const someValue = (user == 'admin') ? true : false;

const answer = x == 2 ? "yes" : "no";

const isMember = true;
console.log( "The fee is " + (isMember ? "$2.00" : "$10.00") );

switch

Instrukcja switch jest kolejnym sposobem testowania warunków działającym na zasadzie przyrównania wyniku do podanych przypadków.


switch (wyrażenie) {
    case przypadek1:
        //fragment wykonywany gdy rezultat wyrażenia jest równy rezultat1 - potrzebuje break;
        break;
    case przypadek2:
        //fragment wykonywany gdy rezultat wyrażenia jest równy rezultat2 - potrzebuje break;
        break;
    default:
        //fragment wykonywany gdy powyższe rezultaty nie są równe rezultatowi wyrażenia - nie potrzebuje break;
}

Każdy przypadek kończy się słowem break, która kończy wykonywanie instrukcji switch. Jeżeli pominiemy to słowo, wtedy nawet przy pomyślnym przyrównaniu zostaną wykonane kolejne sprawdzenia, co często może powodować błędy. Dodatkowo instrukcja switch ma specjalny przypadek default który będzie wybierany, gdy wszystkie inne przypadki będą błędne.


const number = 4;
//poniższy warunek wypisze "Numer równa się cztery"
switch (number) {
    case 1:
        console.log('Numer równa się jeden');
        break;
    case 2:
        console.log('Numer równa się dwa');
        break;
    case 3:
        console.log('Numer równa się trzy');
        break;
    case 4:
        console.log('Numer równa się cztery');
        break;
    default:
        console.log('Nie wiem ile równa się numer');
}

const tool = "obcęgi";
//poniższy warunek wypisze "Wybrałeś obcęgi"
//w poniższym przykładzie upiększamy kod za pomocą dodatkowych
//klamer, które nie są wymagane
switch (tool) {
    case 'wiertarka': {
        console.log('Wybrałeś wiertarkę');
        break;
    }
    case 'śrubokręt': {
        console.log('Wybrałeś śrubokręt');
        break;
    }
    case 'obcęgi': {
        console.log('Wybrałeś obcęgi');
        break;
    }
    case 'młotek': {
        console.log('Wybrałeś młotek');
        break;
    }
    default: {
        console.log('Nie wiem co to za narzędzie');
    }
}

Trening czyni mistrza

Poniżej zamieszczam kilka zadań, które w ramach ćwiczenia możesz wykonać:

  1. Stwórz trzy zmienne: a = 2, b = 3, c = 4. Za pomocą instrukcji warunkowych sprawdź, która zmienna jest największa (pomiń wariant kiedy zmienne mogły by być równe).
    
                let a = 2;
                let b = 3;
                let c = 4;
    
                if (a > b && a > c) {
                    console.log("A jest największa");
                } else {
                    if (b > c) {
                        console.log("B jest największa");
                    } else {
                        console.log("C jest największa");
                    }
                }
                
  2. Masz kod prostego formularza:
    
                <form id="myForm">
                    <label for="formAge">Wpisz wiek</label>
                    <input type="text" id="formAge" name="age">
                    <button type="submit">Sprawdź</button>
                </form>
            

    W poniższym kodzie po wysłaniu takiego formularza pobieram wartość pola age. Twoim zadaniem jest sprawdzić czy użytkownik wpisał liczbę. Spróbuj użyć odpowiedniej metody konwertującej. Dodatkowo sprawdź, czy wpisana liczba lat jest większa lub równa od 18. Jeżeli tak, wpisz w konsoli "wszystko ok", w przeciwnym razie wypisz "niestety dostęp zablokowany."

    
                //podpinamy się pod wysyłanie formularza
                document.querySelector('#myForm').addEventListener('submit', function(e) {
                    e.preventDefault();
    
                    //pobieramy wartość pola #formAge
                    const age = document.querySelector('#formAge').value;
    
                    //w zmiennej age jest tekst wpisany w formularz.
                    //zamień go na liczbę i sprawdź czy po zamianie masz liczbę czy nie liczbę
                    //jeżeli liczba jest większa lub równa 18, wypisz w konsoli
                    //"wszystko ok", w przeciwnym razie wypisz "niestety, dostęp zablokowany"
    
                    //kod pisz tutaj, przed poniższą klamrą i nawiasem
                })
            
    
                document.querySelector('#myForm').addEventListener('submit', function(e) {
                    e.preventDefault();
    
                    const age = document.querySelector('#formAge').value;
                    const ageNr = parseInt(age, 10);
                    if (!isNaN(ageNr) && ageNr >= 18) {
                        console.log("wszystko ok");
                    } else {
                        console.log("niestety, dostęp zablokowany");
                    }
                });