if/else розгалуження

if...else

Ми вміємо виводити на екран (console.log), отримувати інформацію від людини (prompt) і зберігати дані в змінних. Ми ще не вміємо вчити комп'ютер самостійно вирішувати що йому робити, спираючись на наявні дані.

Загалом, іноді, в залежності від умови, потрібно виконати різні дії. Наприклад: якщо на вулиці холодно, то тепліше одягнутися, інакше піти гуляти як є.

Для цього є оператор if, наприклад:

let temp = prompt("Яка на вулиці температура?");
if (temp < 5) {
    console.log("Одягни :) шапку!");
}

Оператор if

Оператор if («якщо») отримує умову, в прикладі вище це temp <5 Комп'ютер обчислює умову, і якщо результат - так (правда, true), то виконує команду, а якщо результат - ні (неправда, false), то просто пропускає команду.

Якщо за істинної умови потрібно виконати більше однієї команди - вони оформлюються блоком коду в фігурних дужках:

if (temp < 5) {
    console.log("Будь ласка..");
    console.log("..одягни шапку!");
}

Зараз спробуйте навчити програму писати текст "оооо тепло", якщо температура більше 4х градусів. Для цього використовуйте оператор > (означає як більше)

Вийшло? Йдемо далі.

Невірна умова, else

Цей блок потрібно писати, якщо є необхідність. Блок else («інакше») виконується, якщо умова невірна:

let temp = prompt("Яка температура на вулиці?");

if (temp < 5) {
    console.log("Шапка!");
} else {
    console.log("Норм)"); // будь-яке значення, яке не менше 5
}

Що можна розміщувати всередині блоків { } ?

Все що завгодно! Включаючи інші умови!

якщо (я хочу їсти) то {
    якщо (у мене багато коштів) то {
        зайти в ресторан
        замовити їжі
    }
    інакше {
        сходити в магазин
        приготувати собі їжі
    }
    // на цьому етапі роботи програми їжа точно поруч з вами
    поїсти
}
інакше {
    якщо (я давно не їв) {
        покачати прес
        повіджиматися
    }
}

Оператори порівняння

 == - дорівнює (так, саме два значка, НЕ ОДИН)
 != - не дорівнює
 >  - більше
 <  - менше
 >= - більше або дорівнює
 <= - менше або дорівнює

У програмуванні ми завжди щось з чимось порівнюємо.

Людською мовою:

спочатку запитай скільки у людини грошей
потім, якщо більше 10, то сказати "круто!"

Комп'ютерною мовою більше 10 - це дещо дивна нелогічна умова. Треба щось порівняти з чимось.

Ось як для комп'ютера правильно:

if (d > 10) ...

Ось як для комп'ютера неправильно:

if (10) ...

// або

if (> 10) ...

Питання

Що буде, якщо переплутати команди місцями?

let a
if (a == 10) {
   console.log("А дорівнює 10");
}
a = prompt("введи число");

Що буде, якщо замість == писати =? наприклад ось:

let a = 0;
if (a = 10) { // написали = 10 , а не == 10
    console.log("wow");
}

і ще таке спробуйте відразу:

let a = 10;
if (a = 0) {
    console.log("wow!!!");
}

Чому так виходить? Якщо не знаєте відповіді - не страшно, але просто не використовуйте присвоїти всередині умов. Під кінець курсу можете запитати у волонтерів, чому це відбувається.

Тепер ви розумієте: є дорівнює (==), а є присвоїти (=) Не використовуйте присвоєння всередині умов.

А що буде тут?

let a = prompt("введи число");
if (a == 10);
   console.log("А дорівнює ...");
   console.log("... десять!");

Щоб такого лиха не виникало, візьміть за правило: завжди використовувати фігурні дужки: if (...) { ... } (щоб явно виділити блок коду, який виконується за умовою)

Ще, вгадайте, що буде:

if (3 < 2 < 4) {
    console.log("da");
}

...і більше ніколи не намагайтеся написати потрійне порівняння. Чудово буде, якщо ви розберетеся, чому код так працює.

Порівняння рядків

До речі! Рядки теж можна порівнювати

let a = prompt("Введи своє ім'я");
let b = prompt("Введи ім'я свого товариша");
if (a == b) {
    console.log("ВАУ");
}

Логічні оператори

Про логічні оператори - і, або, не (&&, ||, !) - читайте в матеріалах. Обов'язково.

Оператори == і ===

Про різницю між ними ви можете прочитати в інтернеті

Додаткові матеріали

Умовне розгалуження (тернарний оператор) (uk.javascript.info)

Ще про тернарний оператор (Ш++)

Оператори порівняння (uk.javascript.info)

Логічні оператори (uk.javascript.info)

Про скорочення перевірок змінних boolean (Ш++)

Обов'язкові задачі

pageКм/день-1pageКм/день-2pageЛіфт Empire State Building

Виникли питання або труднощі? Зверніться за допомогою до Ш++.