Умовний оператор if використовується коли необхідно виконати певний блок коду якщо виконується певна умова. Умова виконується якщо сама умова дорівнює true (логічний тип даних Boolean), тоді виконується блок if в іншому випадку виконується блок else так як умова дорівнює false.

Наприклад:
if (a==2) z=2; else z=3; Будьте уважні коли перевіряєте умову на порівняння ==, не використовуйте помилково оператора присвоєння =. Адже це призведе до невірної перевірки умови.
if (x>=2 && x<=6) { y=0; z=1; } else { y=1; z=0; }

Конструкція if-else

Для того, щоб напрограмувати що-небудь корисне, одних змінних далеко не достатньо. Нам потрібний механізм, який дозволить виконувати визначений код залежно від будь-яких умов.

Тобто нам потрібно мати можливість спитати JavaScript 'Якщо'.

Наприклад так: якщо ця змінна менша за нуль, то вивести 'негативно', інакше (тобто якщо вона більша за нуль) вивести 'позитивно'.

JavaScript для таких питань призначена конструкція if, яка дозволяє виконувати певний код під час виконання будь-якої умови:

if (логічний вираз) {
Цей код виконається,якщо логічний вираз вірний (тобто одно true)
} else {
Цей код виконається,якщо логічний вираз неправильний (тобто false)
}

Зверніть увагу, що блок else не обов'язковий.

Логічне вираження є тим самим питанням, яке ми хочемо задати JavaScript. Наприклад, щоб запитати 'змінна a більше за нуль' ми напишемо так: a > 0.

var a = 3;
/*
Якщо змінна a більша за нуль, то виведи 'вірно',
інакше (якщо менше або дорівнює нулю) виведи 'невірно'
*/
if (a > 0) {alert('Правильно!');} else {alert('Неправильно!');} //виведе 'Правильно!'

var a = -3;
/*	Якщо змінна a більша або дорівнює нулю, то виведи 'вірно',
інакше (якщо менше нуля) виведи 'невірно'
*/
if (a >= 0) {alert('Правильно!');} else {alert('Неправильно!');} //виведе 'Неправильно!'

Скорочений синтаксис

У разі, якщо у фігурних дужках if або else буде тільки один вираз, можна ці фігурні дужки не писати:

//Повний варіант:
if (a == 0) {alert('Правильно!');} else {alert('Неправильно!');}
//Приберемо дужки після if:
if (a == 0) alert('Правильно!'); else {alert('Невірно!');}
//Приберемо дужки після else:
if (a == 0) {alert('Правильно!');} else alert('Неправильно!');
/*
Приберемо дужки і після if, і після else
(Зверніть увагу на точку з комою - вона залишилася):
*/
if (a == 0) alert('Правильно!'); else alert('Невірно!');

Рівність за значенням і типом

Для того, щоб порівняти на рівність, слід використовувати оператор подвійне і ==, а не одиночне =, як можна було подумати.

Чому так? Тому що одно і зарезервоване за присвоєнням. Дивіться приклад:

var a = 0;
/*
Якщо змінна a дорівнює нулю, то виведи 'вірно',
інакше (якщо не дорівнює нулю) виведи 'невірно'
*/
if (a == 0) alert('Правильно!'); else alert('Невірно!'); //виведе 'Вірно!'

А наступний приклад працюватиме не так, як ми вважаємо:

var a = 0;
/*
Ми думаємо воно працює так:
якщо змінна a дорівнює нулю, то виведи 'вірно',
 інакше (якщо не дорівнює нулю) виведи 'невірно'.
Насправді воно працює так:
змінної a присвоїти 1,
якщо вдалося присвоїти - то виведи 'вірно',
інакше (якщо не вдалося присвоїти) виведи 'невірно'.*/
if (a == 1)alert('Правильно!'); else alert('Невірно!'); //завжди виводитиме 'Вірно!'

Окрім оператора == існує ще й оператор ===. Їхня відмінність у тому, що === порівнює не лише за значенням, а й за типом, а == порівнює лише за значенням.

Щоб повністю розібратися в цьому уважно вивчіть приклади:

var a = '0'; //змінна a являє собою рядок, а не число 0
if (a == 0) alert('Правильно!'); else alert('Невірно!');
/*
Виведе 'Вірно!', оскільки перевіряється лише значення, але з тип.
Тому '0' дорівнює 0.
*/

var a = '0'; //змінна a являє собою рядок, а не число 0
if (a === 0) alert('Правильно!'); else alert('Невірно!');
/*
Виведе 'Неправильно!', оскільки рядок '0'
 не дорівнює числу 0 у порівнянні за типом.
*/

Не однаково

Для того, щоб запитати 'не рівне', Існують оператори != та !==. Перший ігнорує різницю в типах, а другий - ні.

var a = 0;
/*
Якщо змінна a НЕ дорівнює нулю, то виведи 'вірно',
інакше (якщо дорівнює нулю) виведи 'невірно'
*/
if (a != 0) alert('Правильно!'); else alert('Невірно!'); //виведе 'Неправильно!', оскільки a дорівнює 0

a = 1;
/*
	Якщо змінна a НЕ дорівнює нулю, то виведи 'вірно',інакше (якщо дорівнює нулю) виведи 'невірно'
*/
if (a != 0) alert('Правильно!'); else alert('Невірно!'); //виведе 'Вірно!', оскільки a дорівнює 1

var a = '0';
/*
Якщо змінна a НЕ дорівнює нулю, то виведи 'вірно',інакше (якщо дорівнює нулю) виведи 'невірно'
*/
if (a != 0) alert('Правильно!'); else alert('Невірно!');
/*
Виведе 'Невірно!', оскільки a дорівнює '0',а відмінність у типах ігнорується.
*/

var a = '0';
/*	
Якщо змінна a НЕ дорівнює нулю, то виведи 'вірно',інакше (якщо дорівнює нулю) виведи 'невірно'
*/
if (a != 0) alert('Правильно!'); else alert('Невірно!');/*
Виведе 'Вірно!', оскільки a дорівнює '0',
 а це не дорівнює 0 при порівнянні за типом.
*/

Всі операції порівняння

Можливі операції порівняння, які можна використовувати

a == b	a дорівнює b
a === b	a дорівнює b и вони одинакові по типу
a != b	a не дорівнює b
a !== b	a не дорівнює b або a дорівнює b, але вони різні по типу
a < b	a менше b
a > b	a більше b
a <= b	a менше або дорівнює b
a >= b	a більше або дорівнює b

Декілька умов відразу

Іноді, можливо, потрібно скласти якусь складну умову, наприклад, користувач вводить місяць свого народження і вам потрібно перевірити, що введене число більше або дорівнює 1 і менше або дорівнює 12 (бо в році 12 місяців).

Для цього існують оператори && (логічне І) та || (логічне АБО).

var a = 3;
var b = -3;
//Якщо a більше нуля і b одночасно менше нуля, то...
if (a > 0 && b < 0) alert('Правильно!'); else alert('Невірно!'); //Виведе 'Вірно!'
var a = 3;
//Якщо a більше або дорівнює 1 і менше або дорівнює 12, то...
if (a >= 1 && a <= 12) alert('Правильно!'); else alert('Невірно!'); //Виведе 'Вірно!'
var a = -3;
var b = -3;
/*
Якщо a більше за нуль АБО b менше за нуль - хоча б один з них, то...
виведе 'Вірно!', оскільки хоча і не більше нуля,
але одна з умов – b < 0 - виконається!
*/
if (a > 0 || b < 0) alert('Правильно!'); else alert('Невірно!');

Робота з логічними змінними

Багато функцій JavaScript в результаті своєї роботи повертають або true (істина), або false (брехня). Ці значення досить зручні при своїй роботі, але новачкам буває досить складно їх зрозуміти.

Уявімо, що змінна a дорівнює true. У такому разі конструкцію if можна записати так:

var a = true;
//Якщо a одно true, то...
if (a == true) alert('Правильно!'); else alert('Невірно!');
/*
Виведе 'Вірно!', тому що a одно true.
*/

Так як такі порівняння досить поширені в JavaScript, існує спеціальний прийом, що полегшує роботу (але не розуміння, на жаль).

Прийом такий: конструкцію a == true можна замінити більш простою: замість if (a == true) написати if (a) і вона працюватиме аналогічно.

Слід користуватися другою конструкцією, оскільки вона простіше.i>

/*
	Замінимо a == true більш просту:
замість if (a == true) напишемо if (a):*/
var a = true;
//Якщо a одно true, то...
if (a) alert('Правильно!'); else alert('Невірно!'); //виведе 'Вірно!', оскільки a одно true
var a = true;
//Якщо a НЕ true (тобто false!), то...
if (!a) alert('Правильно!'); else alert('Невірно!'); //виведе 'Неправильно!', тому що a одно true

//Цей вираз завжди буде виводити 'Вірно'
if (true) alert('Правильно!'); else alert('Невірно!');

//Це вираз завжди виводитиме 'Неправильно'
if (false) alert('Правильно!'); else alert('Невірно!');

//Це вираз завжди виводитиме 'Неправильно'
if (!true) alert('Правильно!'); else alert('Невірно!');
 
//Цей вираз завжди виводитиме 'Вірно'
if (! false) alert ( 'Правильно!'); else alert('Невірно!');

Вкладені if

Припустимо, нам необхідно запитати у JavaScript таку річ: якщо змінна a не визначена, вивести 'Введіть a', якщо визначено, то перевірити - чи більше нуля a чи ні. Якщо більше нуля - то вивести 'Більше нуля!', якщо менше - вивести 'Менше нуля'.

Однією конструкцією if тут не обійтися, потрібно використовувати дві таким чином, щоб одна була всередині іншої:

if (a === undefined) { //якщо змінна a не визначена
alert('Введіть a!');
} else { //якщо змінна a НЕ порожня
if (a > 0) { // запитуємо, чи більше нуля змінна
alert('Більше нуля!');
} else {
alert('Менше нуля!');
}
}

Конструкція else if

Недоліком конструкції попереднього прикладу є велика кількість фігурних дужок.

Щоб позбутися їх,можна користуватися спеціальною конструкцією else if, яка є одночасно і else, і початок вкладеного if:

//Рішення попередньої задачі через конструкцію else if:
if (a === undefined) {
alert('Введіть a!');
} else if (a > 0) {
alert('Більше нуля!');
 } else {
alert('Менше нуля!');
}

Тернарний оператор ‘?’

Тернарний оператор існує у багатьох мовах програмування, наприклад JavaScript, C#, PHP, Java та багато іншого. Усі оператори різняться за кількістю аргументів, до яких застосовуються. Наприклад, існує оператор «-», який змінює знак числа протилежний. Якщо такий оператор застосовується до одного числа, тобто має один аргумент — він називається унарним.

Іноді нам необхідно присвоїти значення змінній в залежності від умови.Тернарний оператор також називаються умовним оператором. Тому перед початком ми згадаємо що таке умовний оператор.

Ось приклад, який надає мінімуму з двох змінних, a і b, третьої змінної з ім'ям minVal:

У цьому коді, якщо змінна a менша, ніж b, minVal присвоюється значення a; в іншому випадку minVal присвоюється значення b.Значення, яке повертає оператор, можна записати в змінну — цей варіант ми вже розглянули в прикладах вище. Крім цього, його можна використовувати у функціях при поверненні значення за допомогою return.

Можна використовувати кілька else if, але зловживати цим не варто (краще скористатися конструкцією switch-case, про яку нижче).

Кілька if

Нехай у нас є таке завдання: сайт підтримує 3 мови - російську, англійську, німецьку. Змінна lang може набувати 3 значень - 'ru', 'en' і 'de'. Залежно від значення змінної lang слід вивести фразу однією мовою.

Рішення: можна було б скористатися вкладеними іфами або else if. Виглядало б це приблизно так:

//Рішення завдання через else if – не найвдаліше
if (lang == 'ru') { // фраза російською
alert('Російський текст');
} else if (lang == 'en') { // фраза англійською
alert('Англійський текст');
} else if (lang == 'de') { // фраза німецькою
alert('Німецький текст');
}

Таке рішення не надто красиве – блок else тут не потрібен! Найпростіше буде написати не один довгий if з кількома else, а кілька if взагалі без else:

//Розв'язання задачі через декілька if – воно набагато краще:
if (lang == 'ru') { // фраза російською
alert('Російський текст');
}
if (lang == 'en') { // фраза англійською
alert('Англійський текст');
}
if (lang == 'de') { // фраза німецькою
alert('Німецький текст');
}

/*
У цьому коді спрацює лише один із іфів,
 оскільки змінна lang може мати лише одне із значень
*/

Однак це рішення теж не надто зручне. Уявіть, що у вас буде не три мови, а 10 вам доведеться написати 10 конструкцій if.

Для таких випадків існує конструкція switch-case.

Оператор вибору switch

Приклад 1

Порівняння значення змінної а з різними константами.

a = 4;
switch (a)
{
  case 3: alert('Маловато'); break;
  case 4: alert('У точку!'); break;
  case 5: alert('Перебір'); break;
  default: alert('Я таких значень не знаю');
}

Приклад 2

Порівняння значення змінної Х на відповідність певній умові.