Условные инструкции в JavaScript

В этой статье рассмотрим условные и логические операторы языка JavaScript.

Условные операторы JavaScript

Условные операторы - это операторы языка JavaScript (ECMAScript), которые в зависимости от некоторого условия позволяют выполнить одно или несколько определённых инструкций.

Формы условных операторов в JavaScript:

• условный оператор if (с одной ветвью);
• условный оператор if...else (с двумя ветвями);
• условный оператор else if... (с несколькими ветвями);
• тернарный оператор (?:);
• оператор выбора switch.

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

Синтаксис оператора if:

if (условие)
  инструкция

Условный оператор if состоит из:

• ключевого слова if;
• условия (выражения в круглых скобках), которое должно равняться true или false (или быть приведено к одному из этих значений);
• инструкции, которую нужно выполнить, если условие является true или приведено к нему.

Например:

if (true)
  count = 4;

В этом примере в качестве условия используется значение true. Это означает, что инструкция count = 4 будет выполняться всегда. Данный пример просто приведен для пояснения принципа работы оператора if, т.к. он лишён всякого смысла.

Например, увеличим значение переменной votes на 1, если она (её тип) является числом:

if (typeof votes === 'number')
  votes++;

Если необходимо выполнить несколько инструкций, то их необходимо поместить в фигурные скобки:

if (typeof votes === 'number') {
  votes++;
  console.log('Число голосов: ' + votes);
}

Рекомендуется, использовать фигурные скобки даже когда используется одна инструкция:

if (typeof votes === 'number') {
  votes++;
}

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

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

Синтаксис:

if (условие) {
  одно или несколько инструкций (будут выполняться, когда условие равно true или приведено к true)
} else {
  одно или несколько инструкций (будут выполняться, когда условие равно false или приведено к false)
}

Например, выведем в консоль сообщение о том, является ли число четным или нет:

if (number % 2) {
  console.log('Число нечётное!');
} else {
  console.log('Число чётное!');
}

Правило приведения условия к true или false

Если выражение в условии оператора if не равно true или false, то JavaScript приведёт его к одному из этих значений. Данное действие он выполняет с помощью так называемого "правила лжи".

Смысл данного правила: любое выражение является true, кроме следующих значений:

• false (ложь);
• "" или '' (пустая строка);
• NaN (специальный числовой тип данных «не число»);
• 0 (число «ноль»);
• null («пустое» значение);
• undefined («неопределённое» значение).

Например, выведем в консоль браузера приветственное сообщение, в зависимости от того какое значение хранится в переменной nameUser:

if (nameUser) {
  console.log('Привет, ' + name + '!');
} else {
  console.log('Привет, гость!');
}

Если переменная nameUser будет содержать пустую строку, то по правилу лжи, она будет приведена к значению false. Следовательно, в консоль будет выведено сообщение «Привет, гость!».

А если, например, переменная nameUser будет содержать строку «Тимур», то выражение в условии будет приведено к значению true. В результате, в консоли отобразится сообщение «Привет, Тимур!».

Оператор else if... (несколько условий)

Синтаксис:

if (условие1) {
  инструкции 1
} else if (условие2) {
  инструкции 2
} else if (условие3) {
  инструкции 3
//...
} else if (условиеN) {
  инструкции N
} else {
  инструкции, которые будут выполнены, если ни одно из условий не равно true или не приведёно к этом значению
}

Условный (тернарный) оператор (?:)

Тернарный оператор – оператор JavaScript, который можно использовать, когда необходимо в зависимости от условия выполнить одно из двух заданных выражений.

Синтаксис:

условие ? выражение1 : выражение2

Тернарный оператор состоит из трех операндов, которые разделяются с помощью символов ? и :. Условие тернарного оператора задаётся в первом операнде. Его также можно заключить в скобки. Если условие равно true или будет приведено к этому значению будет выполнено выражение1, иначе - выражение 2.

Например:

(number > 10) ? console.log('Число больше 10!') : console.log('Число меньше или равно 10');

В JavaScript допустимы множественные тернарные операторы (?:):

const dayNumber = new Date().getDay();

day =
  (dayNumber === 0) ? 'Воскресенье' :
    (dayNumber === 1) ? 'Понедельник' :
      (dayNumber === 2) ? 'Вторник' :
        (dayNumber === 3) ? 'Среда' :
          (dayNumber === 4) ? 'Четверг' :
            (dayNumber === 5) ? 'Пятница' :
              (dayNumber === 6) ? 'Суббота' : 'Неизвестный день недели';

console.log(`Сегодня ${day.toLowerCase()}.`);

Вышеприведённый пример, но с использованием множественной записи оператора if...else:

const dayNumber = new Date().getDay();

if (dayNumber === 0) {
  day = 'Воскресенье';
} else if (dayNumber === 1) {
  day = 'Понедельник';
} else if (dayNumber === 2) {
  day = 'Вторник';
} else if (dayNumber === 3) {
  day = 'Среда';
} else if (dayNumber === 4) {
  day = 'Четверг';
} else if (dayNumber === 5) {
  day = 'Пятница';
} else if (dayNumber === 6) {
  day = 'Суббота';
} else {
  day = 'Неизвестный день недели';
}

console.log(`Сегодня ${day.toLowerCase()}.`);

Оператор switch

Оператор switch предназначен для выполнения одного варианта инструкций из нескольких в зависимости от значения выражения. Выбор того или иного варианта определяется посредством строгого равенства результата выражения значению случая (case).

Синтаксис оператора switch:

switch (выражение) {
  case значение1:
    // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значение1»
    break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch)
  case значение2:
    // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значение2»
    break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch)
  // ...
  case значениеN:
    // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значениеN»
    break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch)
  default:
    // инструкции, которые будут выполнены, если результат выражения не равен не одному из значений
}

Ключевое слово default является необязательным. Оно используется, когда необходимо задать инструкции, которые нужно выполнить, если результат выражения будет не равен ни одному значению варианта (case).

Инструкция break является необязательной. Она предназначена для прерывания выполнения оператора switch и передачи управлению инструкции, идущей после него.

Например, выведем сообщение в консоль браузера о количестве конфет:

const countCandyBoys = 1;
const countCandyGirls = 2;
let message;
switch (countCandyBoys + countCandyGirls) {
  case 1:
    message = 'Одна конфета';
    break;
  case 2:
  case 3:
    message = 'Две или три конфеты';
    break;
  case 4:
    message = 'Четыре конфеты';
    break;
  default:
    message = 'Не одна, не две, не три и не четыре конфеты';
}
// выведем сообщение в консоль
console.log(message);

В вышеприведенном примере вычисленное выражение равно 3. Следовательно, будет выполнены инструкции message = 'Две или три конфеты' и break. Инструкция break прервёт дальнейшее выполнение оператора switch и передаст управление инструкции, идущей после него, т.е. console.log(message). Она выведет в консоль сообщение «Две или три конфеты».

Например, выведем выведем в консоль текущий день недели:

let day = '';

switch (new Date().getDay()) {
  case 0:
    day = 'Воскресенье';
    break;
  case 1:
    day = 'Понедельник';
    break;
  case 2:
    day = 'Вторник';
    break;
  case 3:
    day = 'Среда';
    break;
  case 4:
    day = 'Четверг';
    break;
  case 5:
    day = 'Пятница';
    break;
  case 6:
    day = 'Суббота';
    break;
  default:
    day = 'Неизвестный день недели';
}

console.log(`Сегодня ${day.toLowerCase()}.`);

Пример, в котором не используется инструкция break:

const result = 'success';

switch (result) {
  case 'success':
    console.log('Успех!');
  case 'invalidCaptcha':
    console.log('Неверная капча!');
  default:
    console.log('Ошибка!');
}

В этом примере выражение оператора switch равно success. Следовательно, будет выполнена инструкция console.log('Успех!'), которая выведет сообщение «Успех!» в консоль. Но так как после неё нет инструкции break, то выполнение скрипта будет продолжено в следующем варианте. Таким образом, инструкции будут выполняться до тех пока пока на пути не встретиться break или не будет достигнут конец оператора switch. В результате выполнения этого примера в консоль будут выведены 3 сообщения: «Успех!», «Неверная капча!» и «Ошибка!».

В некоторых случаях может требоваться именно такое поведение, но не в этом. Здесь просто допущена ошибка.

Исправленный вариант примера:

const result = 'success';

switch (result) {
  case 'success':
    console.log('Успех!');
    break;
  case 'invalidCaptcha':
    console.log('Неверная капча!');
    break;
  default:
    console.log('Ошибка!');
}