Условный оператор if...else в JS

В этой статье вы познакомитесь с условным операторам if...else, который позволяет принимать решения для организации ветвлений в JavaScript.

В программировании часто возникает ситуация, когда необходимо выбрать, какой блок кода выполнять, на основе каких-то данных.

Например, в программе для учителя может быть 4 возможных блока кода, которые соответствуют выставлению оценок 5, 4, 3 и 2. Чтобы принять решение, какой блок выбрать, то есть какую оценку поставить, программе нужны данные: например, процент выполнения теста.

Для принятия решений в программировании используют операторы сравнения и логические операторы. А для организации условных ветвлений, то есть выбора определенного блока кода, — условный оператор if...else.

В JavaScript есть три формы оператора if...else:

Оператор if.
Оператор if...else.
Оператор if...else if...else.

Оператор if в JavaScript

Давайте сначала договоримся, что инструкции — это команда или набор команд. То есть инструкции — просто кусок кода.

Cинтаксис

if (условие) {
    инструкции;
}

Как это работает

1. Оператор if оценивает условие внутри круглых скобок ().
2. Если условие — true, выполняются инструкции в теле if.
3. Если условие — false, инструкции в теле if игнорируются.

Примечание. Тело оператора if — код внутри фигурных скобок {} после if.

Пример

// проверяем, положительное ли число введено

const number = prompt("Введите число ");

// условие: число больше нуля?
if (number > 0) {
 // инструкция в теле оператора if
  console.log("Число положительное.");
}

// инструкция после if
console.log("Условные конструкции — это несложно.");

Предположим, пользователь ввел 2. В этом случае условие number > 0 равно true, потому что 2 > 0. Значит, код внутри тела if выполняется (см. рисунок выше).

Вывод 1

Введите число: 2
Число положительное.
Условные конструкции — это несложно.

Теперь предположим, пользователь ввел -1. В этом случае условие number > 0 равно false. Следовательно, тело оператора if пропускается, выполняется код после оператора (см. рисунок выше).

Вывод 2

Введите число: -1
Условные конструкции — это несложно.

Поскольку инструкция console.log("Условные конструкции — это несложно."); находится вне тела оператора if, она выполняется всегда, вне зависимости от условия if.

Оператор if...else в JavaScript

У оператора if есть необязательный пункт — else.

Синтаксис

if (условие) {
    // инструкции1 в теле if
else {
   // инструкции в теле else
}

Как это работает

1. Оператор if...else оценивает условие внутри скобок.

2. Если условие — true,
• выполняются инструкции1 в теле if;
• инструкции в теле else игнорируются.

3. Если условие — false,
• инструкции в теле if игнорируются;
• выполняются инструкции2 в теле else.

Пример

// определяет, какое введёно число: 
// положительное, отрицательное или ноль

const number = prompt("Введите число: ");

// проверяем, положительное число или нет
if (number > 0) {
  // инструкция в теле if 
  console.log("Это положительное число.");
}
// в противном случае — число отрицательно или ноль
else {
  // инструкция в теле else
  console.log("Это отрицательное число или ноль.");
}

// инструкция после конструкции if...else
console.log("Конструкция if...else — это несложно.");

Вывод 1

Введите число: 2
Это положительное число.
Конструкция if...else — это несложно.

Предположим, пользователь ввел 2. В этом случае условие (number > 0) — true. Значит, инструкции в теле if выполнятся, а инструкции в теле else — проигнорируются.

Вывод 2

Введите число: -1
Это отрицательное число или ноль.
Конструкция if...else — это несложно.

Теперь предположим, что пользователь ввел 2. В этом случае условие (number > 0) — false. Значит, инструкции в теле if игнорируются, а инструкции в теле else — выполняются.

Оператор if...else if в JavaScript

Оператор if...else позволяет выбирать один из двух альтернативных блоков кода. Если нужно сделать выбор между тремя альтернативами, используют if...else if.

Синтаксис

if (условие1) {
    // инструкции1 в теле if
else if (условие2) {
   // инструкции2 в теле else if
} else {
   // инструкции3 в теле else
}

Как это работает

1. Если условие1 — true, выполняются инструкции1 в теле if.

2. Если условие1 — false, оценивается условие2.
• Если условие2 — true, выполняются инструкции2 в теле else if.
• Если условие2 — false, выполняются инструкции3 в теле else.

Пример

// определяет, какое число введено:
// положительное, отрицательное или ноль

const number = prompt("Введите число: ");

// проверяем, положительное число или нет
if (number > 0) {
    // инструкция1 в теле if
    console.log("Это положительное число.");
}
// раз число не положительное, проверяем, вдруг оно равно нулю
else if (number == 0) {
   // инструкция2 в теле else if
  console.log("Это ноль.");
}
// раз число не положительное или не ноль, значит, это отрицательное число
else {
    // инструкция3 в теле else
    console.log("Это отрицательное число.");
}

// инструкция после конструкции if...else if...else
console.log("Конструкция if...else if...else — это несложно.");

Вывод

Введите число: 0
Это ноль.
Конструкция if...else if...else. — это несложно.

Предположим, пользователь ввел 0. Тогда условие1 (number > 0) — false. Тогда проверяется условие2 (number == 0). Условие2 — true, поэтому выполняется инструкция2.

Вложенные операторы if...else

Один оператор if...else можно использовать внутри другого оператора if...else — и так сколько угодно раз. Такая конструкция называется вложенным оператором if...else.

Пример

// определяет, какое число введено:
// положительное, отрицательное или ноль

const number = prompt("Введите число: ");

if (number >= 0) {
    if (number == 0) {
        console.log("Это ноль.");
    } else {
        console.log("Это положительное число.");
    }
} else {
    console.log("Это отрицательное число.");
}

Вывод

Введите число: 5
Это положительное число.

Предположим, пользователь ввел 5. В этом случае условие (number >= 0) — true, поэтому управление программой передается во внешний оператор if. Далее оценивается услвоие внутреннего оператора if (number == 0). Поскольку оно false, выполняется инструкция из тела else внутреннего оператора if.

Совет. Как вы видите, вложенные if...else усложняют логику программу. Поэтому стоит избегать вложенных конструкций, если это возможно.

Иногда {} можно не использовать

Если в теле if...else находится только одна инструкция, фигурные скобки можно не писать.

Два кода ниже работают одинаково:

const number = 2;

if (number > 0) {
    console.log("Это положительное число.");
} else {
   console.log("Это отрицательное число или ноль.");
}

То же самое, но без скобок

const number = 2;

if (number > 0)
    console.log("Это положительное число.");
else
   console.log("Это отрицательное число или ноль.");