Условия if, else и switch в JavaScript

В этой статье будет разобран механизм условий if в JavaScript. В программировании условие if - это одни из основных инструментов. Давайте посмотрим, как это работает:

if( /* условие */ ){
  /* код в этих скобках будет выполняться, 
  если "условие" является правдой */
}else{
  /* код в этих скобках будет выполняться, 
  если "условие" является ложью */
}

Обратите внимание, что можно записать if( ... ){ ... } без блока else{ ... }. Также можно записать оба блока без фигурных скобок, но тогда выполнится только следующая строчка после if или else. Приведём пример и попробуем написать код с возможными условиями:

var  a = 4;

if( a < 5 ) console.log('Это правда'); // значение a меньше 5

if( a <= 5 ) console.log('Это правда'); // значение a меньше или равно 5

if( a > 3  ) console.log('Это правда'); // значение a больше 3

if( a >= 3  ) console.log('Это правда'); // значение a больше или равно 3

if( a == 4 ) console.log('Это правда'); // значение a равно 4

if( a == 2 * 2 ) console.log('Это правда'); // значение a равно 4 (потому что 2*2=4)

if( a != 7 ) console.log('Это правда'); // значение a НЕ равно 7

Во всех перечисленных примерах будет выведена строка "Это правда", потому что условие выполняется. Помимо сравнения по значению есть ещё и сравнение по типу. К примеру:

var a = true; // тип данных boolean (имеет два значения true и false)

if( 1 == true ) console.log('Это правда'); // цифра 1 равно true

if( a === true ) console.log('Это правда'); // значение a имеет тип и равно true

if( a !== false ) console.log('Это правда'); // значение a не имеет тип или не равно false

Условие может быть как в одну строку, так и в несколько.

Помимо if и else есть ещё else if. Последнее используется для создания множественных условий. Приведём наглядный пример:

var a = 2;

if( a == 1 ){
   console.log(a + ' == 1');
}else if(a < 3){ 
   console.log(a + ' < 3');
}else if(a <= 2){ 
   console.log(a + ' <= 2');
}else{ 
   console.log('Ничего не подходит');
}

В таком коде условия будут проверять по порядку. Сначала проверится a == 1 и оно окажется ложью. Будет проверено следующее условие по списку a < 3 - это условие является истиной, поэтому в результате выполнения этого JavaScript кода на экран браузера будет выведен текст "2 < 3". Но если бы и это условие не подошло, то было бы проверено следующее a <= 2. Но если и оно бы не подошло, то была бы выполнено то, что стоит в else{ ... } - на экран бы было выведен текст "Ничего не подходит".

Возможно сделать несколько проверок внутри скобок if( ... ). Для этого используются логические операторы "&&" (и), "||" (или). Также возможно ставить скобки внутри условий. Эти скобки работают как скобки в математике. Разберём всё на примере:

var a = 2;
b = 3;
c = 4;

if( a == 2 && b < c ){
  // код здесь будет выполняться, потому что условие - истина
}

if( a == 2 && (b < c && c < a ) ){
  // код здесь НЕ будет выполняться, потому что условие - ложь (c больше a)
}

if( a == 2 || (b < c && c < a ) ){
  // код здесь будет выполняться, потому что условие - истина. Несмотря на то, что часть выражения после "||" является ложью
}

Конструкция switch

Если необходимо выполнить разный код при определённых значениях аргумента, то для большого количества проверок подойдёт switch( ... ). Продемонстрируем работу этой функции наглядно:

var a = 2;

switch (a) {
   case 1:
      console.log('Переменная a равна одному');
   break;
   case 2: 
      console.log('Переменная a равна двум');
   break;
   case 'три': 
      console.log('Переменная a равна трём');
   break;
   default:
      console.log('Значение не найдено');
   break;
}

В результате выполнения этого кода на экране браузера появится надпись "Переменная a равна двум". Это происходит потому, что функция switch берёт значение переменной a и начинает сравнивать со значениями, которые стоят после слова "case". Эти значения могут быть как строки, так и числа. В примере a = 2, поэтому функция выполнила код, стоящий в пункте "case 2:".

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