Умовна конструкція if..else в JavaScript

Умовні конструкції дають змогу виконати ті чи інші дії залежно від певних умов.

Конструкція if..else перевіряє деяку умову і якщо ця умова правильна, то виконує деякі дії. Найпростіша форма конструкції if..else:

if(умова){
деякі дії
}

Після ключового слова if у круглих дужках іде умова, а після умови - блок коду з деякими діями. Якщо ця умова істинна, то потім виконуються дії, які поміщені в блоці коду

Наприклад:

const income = 100;
if(income > 50) {
console.log("дохід більше 50");
}

Тут у конструкції if використовується така умова: income > 50. Якщо ця умова повертає true, тобто якщо константа income має значення більше 50, то браузер відображає повідомлення. Якщо ж значення income менше 50, то жодного повідомлення не відображається.

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

const income = 100;

if(income > 50) console.log("дохід більше 50");

або перенести дії на наступний рядок

const income = 100;

if(income > 50)

console.log("дохід більше 50");

Причому умови можуть бути складними:

const income = 100;
const age = 19;

if(income > 50 && age > 18){
console.log("дохід більше 50");
console.log("вік більше 18");
}

Перевірка наявності значення

Конструкція if дає змогу перевірити наявність значення. Наприклад:

let myVar = 89;

if(myVar){
console.log(`Змінна myVar має значення: ${myVar}}`);
}

Якщо змінна myVar має значення, як у цьому випадку, то в умовній конструкції вона поверне значення true.

Протилежний варіант:

let myVar;

if(myVar){
console.log(`Змінна myVar має значення: ${myVar}}`);
}

Тут змінна myVar не має значення. (У реальності вона дорівнює undefined) Тому умова в конструкії if поверне false, і дії в блоці конструкції if не будуть виконуватися.

Але нерідко для перевірки значення змінної використовують альтернативний варіант - перевіряють на значення undefined і null:

if (myVar !== undefined && myVar !== null) {
console.log(`Змінна myVar має значення: ${myVar}`);
}

Вираз else

Вище ми розглянули, як визначити дії, які виконуються, якщо умова після if істинна. Але що, якщо ми хочемо також виконувати ще один набір інструкцій, якщо умова хибна? У цьому випадку можна використовувати блок else. Цей блок містить інструкції, які виконуються, якщо умова після if хибна, тобто дорівнює false:

if(умова){
дії, якщо умова істинна
}
else{
дії, якщо умова хибна
}

Тобто якщо умова після if істинна, виконується блок if. Якщо умова хибна, виконується блок else. Наприклад:

const income = 45;

if(income > 50){
console.log("Дохід більше 50");
}
else{
console.log("Дохід менше або дорівнює 50");
}

Тут константа income дорівнює 45, тому умова після оператора if поверне false, і управління перейде до блоку else.

Також якщо блок else містить одну інструкцію, то можна скоротити конструкцію:

const income = 45;
if(income > 50) console.log("Дохід більше 50");
else console.log("Дохід менше або дорівнює 50");

Альтернативні умови та else if

За допомогою конструкції else if ми можемо додати альтернативну умову до блоку if. Наприклад, вище в умову значення income може бути більшим за певне значення, може бути меншим, а може бути рівним йому. Відобразимо це в коді:

const income = 50;

if(income > 50) {
console.log("Дохід більше 50");
}
else if(income === 50){
console.log("Дохід дорівнює 50");
}
else{
console.log("Дохід менше 50");
}

У цьому випадку виконається блок else if. За необхідності ми можемо використовувати кілька блоків else if з різними умовами:

const income = 500;

if(income < 200){
console.log("Дохід нижче середнього");
}
else if(income>=200 && income<300){
console.log("Трохи нижче середнього");
}
else if(income>=300 && income<400){
console.log("Середній дохід");
}
else{
console.log("Дохід вище середнього");
}

При цьому блок else застосовувати необов'язково:

const income = 500;

if(income < 200){
console.log("Дохід нижче середнього");
}
else if(income>=200 && income<300){
console.log("Трохи нижче середнього");
}
else if(income>=300 && income<400){
console.log("Середній дохід");
}

True або false

У javascript будь-яка змінна може застосовуватися в умовних виразах, але не будь-яка змінна представляє тип boolean. І в зв'язку з цим постає питання, що поверне та чи інша змінна - true чи false? Багато залежить від типу даних, який представляє змінна:

• undefined
  Вертає false
• пulІ
  Вповертає false
• Вoolian
  Якщо константа/змінна дорівнює false, то повертається false. Відповідно якщо константа/змінна дорівнює true, то повертається true
• Number
  Вертає false, якщо число дорівнює 0 або NaN (Not a Number), в інших випадках повертається trueНаприклад, наступна змінна повертатиме false:

  let x = NaN;
  
  if(x){  
  // false        
  }
  

• String

  Повертає false, якщо константа/змінна дорівнює порожньому рядку, тобто її довжина дорівнює 0, в інших випадках повертається true

  const emptyText = ""; // false - оскільки порожній рядок
  const someText = "javascript"; // true - рядок не порожній

• Object

  Завжди повертає true

  const user = {name:"Tom"};  // true
  const car = {}; // true