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 występującego w nawiasach jest prawdą (true) czy fałszem (false).

if

Instrukcja if sprawdza dany warunek, i w zależności czy jest on równy true lub false wykona lub nie wykona sekcję kodu zawartą w klamrach:


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ć przyrównanie do wartości jak powyżej. Może to tez być równanie matematyczne, czy inne wyrażenia, ponieważ rezultat konwertowany jest na wartość boolean (czyli przyjmuje true/false).

Wartością false staje się każda z poniższych wartości:


if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all)

Każda inna wartość to true.

Poniżej kilka najpopularniejszych zastosowań:


const x = 1;

if (x) { //true
    ...
}

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

if (x) { //true bo tekst jest różny od ""
    ...
}

//Liczba 0 to false, każda inna to true
const a = 5;
const b = 5;
if (a-b) { //false bo a-b === 0
    ...
}

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

if (x) { //false
    ...
}

//undefined to false
let y;

if (y) { //false
    ...
}

if (typeof other === "undefined") { //true bo nie mamy zmiennej other

}

//każda funkcja coś zwraca - domyślnie jest to wartość undefined
//poniższa funkcja nie nie ma instrukcji return więc zwraca undefined

function our() {}


if ( our() ) { //false bo undefined
    ...
}

//null to false
const n = null;
if (n) {...}

Pamiętaj, że w JavaScript działa automatyczna konwersja danych. Przykładowo gdy dodajesz tablicę do stringa, wtedy zostanie ona skonwertowana na string. Jeżeli tablica jest pusta, zostanie skonwertowana na pusty ciąg.


const tab = [];
if (tab + "") { //"" + "" === "" czyli false

}

const nr = 0;
const str = "";
if (str + nr) { //0 + "" === "0", czyli true bo różne od ""
}


if (Math.min(0,1,2,3,4,5)) { //0 === false
}

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 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');
}

const name = "Ala";

if (name === "Monika") {
    console.log("Imię to Monika");
} else if (name === "Beata") {
    console.log("Imię to Beata");
} else if (name === "Patrycja") {
    console.log("Imię to Patrycja");
} else {
    console.log("Imię jest nieznane");
}

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 = true;
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

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 (odpowiednik else w instrukcji if).


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 = Number(age, 10);
    
                    if (!isNaN(ageNr) && ageNr >= 18) {
                        console.log("Wszystko ok");
                    } else {
                        console.log("Niestety, dostęp zablokowany");
                    }
                });