if...else

Інструкція if...else (якщо... інакше) виконує інструкцію if, якщо задана умова є істинною. Якщо ця умова є хибною, то виконується інша інструкція, в положенні else.

Спробуйте його в дії

Синтаксис

if (condition)
  statement1

// З положенням else
if (condition)
  statement1
else
  statement2
condition

Вираз, котрий розглядатиметься на предмет істинності або хибності.

statement1

Інструкція, що виконується, якщо condition має істинне значення. Може бути будь-якою інструкцією, включно зі вкладеними інструкціями if. Аби виконати декілька інструкцій, слід використати інструкцію-блок ({ /* ... */ }) для їх групування. Аби не виконувати жодних інструкцій, слід використати порожню інструкцію.

statement2

Інструкція, що виконується, якщо condition має хибне значення і якщо положення else існує. Може бути будь-якою інструкцією, включно з інструкцією-блоком та вкладеними інструкціями if.

Опис

Декілька інструкцій if...else можуть бути вкладені одна в одну, аби утворити положення else if. Зверніть увагу, що в JavaScript немає ключового слова elseif (одним словом).

if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  statement3
// …
else
  statementN

Аби побачити, як це працює, то ось, який вигляд це б мало, якби вкладення мали коректні відступи:

if (condition1)
  statement1
else
  if (condition2)
    statement2
  else
    if (condition3)
      statement3
// …

Аби виконати декілька інструкцій в межах одного положення, слід використати інструкцію-блок ({ /* ... */ }) для їх групування.

if (condition) {
  statements1
} else {
  statements2
}

Невикористання блоків може призводити до неочевидної поведінки, особливо якщо код відформатований вручну. Наприклад:

function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a – це 1, а b – це 2");
  else
    console.log("a – це не 1");
}

Цей код має безневинний вигляд, а проте виконання checkValue(1, 3) виведе "a – це не 1". Так відбувається через те, що при наявності обірваного else положення else приєднується до найближчого положення if. Таким чином, код вище, отримавши коректні відступи, матиме такий вигляд:

function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a – це 1, а b – це 2");
    else
      console.log("a – це не 1");
}

Загалом, доброю практикою є завжди використовувати інструкції-блоки, особливо коли в коді є вкладені інструкції if.

function checkValue(a, b) {
  if (a === 1) {
    if (b === 2) {
      console.log("a – це 1, а b – це 2");
    }
  } else {
    console.log("a – це не 1");
  }
}

Не слід плутати примітивні значення Boolean true і false з істинністю або хибністю об'єкта Boolean. Усі значення, окрім false, undefined, null, 0, -0, NaN і порожнього рядка (""), в тому числі будь-які об'єкти, серед яких об'єкти Boolean зі значенням false, вважаються істинними, бувши використані як умова. Наприклад:

const b = new Boolean(false);
if (b) {
  console.log("b – істинне значення"); // "b – істинне значення"
}

Приклади

Вживання if...else

if (cipherChar === fromChar) {
  result += toChar;
  x++;
} else {
  result += clearChar;
}

Вживання else if

Зверніть увагу на те, що в JavaScript немає синтаксису elseif. Проте можна написати таке з пробілом між else та if:

if (x > 50) {
  /* якісь дії */
} else if (x > 5) {
  /* якісь дії */
} else {
  /* якісь дії */
}

Використання присвоєння як умови

Майже ніколи не повинно бути if...else з присвоєнням виду x = y як умовою:

if ((x = y)) {
  // …
}

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

x = y;
if (x) {
  // …
}

Що набагато ясніше. Проте на той рідкісний випадок, коли захочеться зробити щось подібне, документація while містить розділ Використання присвоєння як умови, який вміщає наші рекомендації.

Специфікації

Сумісність із браузерами

desktop mobile server
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet Deno Node.js
if...else
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 3
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Deno Full support 1.0
Node.js Full support 0.10.0

Дивіться також