Условные операторы, if, else и switch в JavaScript: с чего начать и как не ошибиться

Когда вы пишете программу, часто нужно, чтобы она принимала решения — например, проверяла пароль, выбирала нужный вариант оформления или подсказывала пользователю, что делать дальше. Для этого в JavaScript есть условные операторы.

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

Содержание

• Зачем нужны условные операторы
• Как это работает
• Виды условных операторов
• Оператор if-else — выбор между вариантами
• Вложенный if-else
• Последовательность проверок if-else if-else
• Как работает тернарный оператор (? :) и когда его стоит применять
• Конструкция switch в JavaScript
• Несколько советов
• Какие ошибки допускают новички при работе с условными операторами

Зачем нужны условные операторы

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

• Управлять выполнением программы. Например, если корзина пользователя пуста, вывести сообщение об этом. Если нет — показать добавленные товары.
• Реагировать на разные ситуации. Если пользователь ввёл неверный пароль, программа должна сообщить об ошибке.
• Строить гибкую логику. С помощью условий можно обрабатывать пользовательский ввод, выбирать поведение компонента, принимать решения на основе данных.
• Избегать дублирования кода. Вложенные условия позволяют использовать одну и ту же структуру для разных сценариев.

Представьте, что вы создаёте интерфейс для интернет-магазина. Нужно отобразить одно сообщение, если в корзине есть товары, и другое, если она пуста:

if (cart.length > 0) {                 // Убеждаемся, что длина массива cart больше 0, то есть в корзине есть товары
  console.log("Товар добавлен в корзину"); // Если условие истинно — выводим сообщение о том, что товар в корзине
} else {                               // В противном случае (если cart.length равно 0, то есть корзина пуста)
  console.log("Ваша корзина пуста");       // Выводим сообщение, что корзина пуста
}

В этом коде программа проверяет условие cart.length > 0. Если оно истинно, выполняется первый блок, а если нет, то второй.

Читайте также:

Как запустить JavaScript-код: в браузере, консоли и редакторе кода

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

Условный оператор работает по принципу «если условие верно — выполняем один код, если нет — другой».

• Программа проверяет условие — например: a > 10.
• Если это правда (условие даёт true), выполняется код внутри блока if.
• Если это неправда (условие даёт false), выполняется блок else, если он есть.

Например:

if (score >= 50) {
  console.log("Вы прошли тест!");
} else {
  console.log("Попробуйте ещё раз.");
}

В этом примере:

• Программа проверяет, набрал ли участник теста 50 баллов; для этого значение score должно быть больше или равно 50.
• Если да, в консоль выводится «Вы прошли тест!».
• Если нет, выводится «Попробуйте ещё раз».

Что может быть условием

В JavaScript условием может быть почти всё, что можно интерпретировать как логическое значение.

Сравнения:

if (a > 10)      // Больше
if (b <= 5)      // Меньше или равно
if (x === 42)    // Строгое равенство (по значению и типу)
if (y !== 0)     // Строгое неравенство

Логические выражения:

if (a > 5 && b < 10) {
  // && — логическое И: оба условия должны быть истинны
}

if (role === 'admin' || role === 'moderator') {
  // || — логическое ИЛИ: достаточно, чтобы одно из условий было истинным
}

if (!isBlocked) {
  // ! — логическое НЕ: условие срабатывает, если isBlocked — false
}

Булевы значения

Это просто ответ «истина» или «ложь» при проверке какого-то условия. Скажем, пользователь в сети или нет, у него есть права администратора или нет.

Например:

let isAdmin = true;

Здесь isAdmin — это переменная, в которой хранится true. Это значит, что пользователь — администратор.

Эту переменную можно сразу использовать как условие:

if (isAdmin) {
  console.log("Показать панель управления?");
}

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

Булевы значения часто встречаются в реальной логике:

• isOnline = false — пользователь не в сети,
• hasAccess = true — доступ разрешён,
• isPaid = false — товар не оплачен.

Что ещё можно использовать в условии

В JavaScript в условии можно писать не только сравнения, но и просто значения: числа, строки, переменные. JavaScript сам решает, считать это значение истинным или ложным.

Это называется «истинность» (truthy) и «ложность» (falsy).

Истинные значения (truthy):

• числа, кроме 0: 42, -42, 3.14;
• любая непустая строка: "Hello", "false";
• пустой массив: [];
• пустой объект: {};
• любая функция, независимо от содержимого, даже пустая: function() {};
• положительная и отрицательная бесконечность: Infinity и -Infinity.

Если в if попадёт одно из этих значений, условие сработает.

if ("hello") {
  console.log("И тебе привет"); // Это сработает, потому что строка не пустая
}

Ложные значения (falsy):

• false — булево значение false;
• 0 — число ноль;
• "" или '' — пустая строка;
• null — отсутствие значения;
• undefined — неопределённое значение;
• NaN — «не число» (Not-a-Number).

let x = ""; // falsy

if (x) {
 console.log("x — истинное значение"); // Этот блок не выполняется
} else {
   console.log("x — ложное значение"); // Этот блок выполняется
}

Истинные и ложные значения удобны, например, при проверке ввода:

let name = prompt("Введите имя");

if (name) {
  console.log("Здравствуйте, " + name);
} else {
  console.log("Вы не ввели имя");
}

Здесь не нужно писать name!=="" — JavaScript сам считает пустую строку ложной.

Читайте также:

Чем различаются var, let и const в JavaScript

Виды условных операторов

В JavaScript есть три основных условных оператора:

• if и if-else — самая часто встречающаяся конструкция. Мы выше писали, как она работает: если условие истинно, что-то происходит, если ложно — происходит что-то другое.
• Тернарный оператор (? :) — короткая форма if-else. Работает по принципу if-else, но это выражение, а не конструкция, то есть результат можно сразу присвоить переменной.
• switch — выбирает не из двух вариантов, а из нескольких. Программа смотрит на значение и сравнивает его с готовым списком вариантов. Например, если день недели — понедельник, делаем одно. Если вторник — другое.

Давайте разберём каждый оператор отдельно.

Оператор if-else — выбор между вариантами

Оператор if-else — один из основных инструментов в JavaScript.

Эта конструкция помогает управлять поведением программы в самых разных ситуациях — от проверки ввода до управления доступом.

Раньше мы уже описывали принцип его работы. Повторим основное.

• Условие (if). Записывается в скобках после ключевого слова if.
• Блок кода ({}). Если условие истинно, выполняется блок кода, заключённый в фигурные скобки {} после условия if.
• Необязательный блок кода (else). Если условие ложно, выполняется блок кода, заключённый в фигурные скобки {} после ключевого слова else.

Блок if

Оператор if работает так:

• Проверяется заданное условие.
• Если оно истинно, выполняется блок кода внутри оператора if.
• Если условие ложно (false), этот блок кода пропускается и программа выполняется дальше.

Возьмём для примера светофор. Мы храним в переменной light текущий цвет светофора.

Если цвет зелёный, человек может идти.

let light = "green";

if (light === "green") {
console.log("Можете идти");
}

• Здесь условие light === "green" проверяет, равно ли значение переменной light строке "green".
• Если условие истинно, то на экран выводится сообщение «Можете идти».

Блок else

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

Добавим этот блок в наш пример со светофором.

if (light === "green") {
  console.log("Можете идти");
} else {
  console.log("Ждите");
}

Теперь, если цвет любой другой, кроме зелёного, выведется команда «Ждите».

Вложенный if-else

Иногда программе нужно проверить не одно, а несколько условий последовательно и действовать по ситуации.

Допустим, вы хотите сначала узнать, действительно ли пользователь ввёл число, а потом — чётное оно или нечётное.

Для таких случаев можно использовать вложенные условия — когда один if находится внутри другого.

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

Подход простой:

• Сначала программа проверяет первое условие.
• Если оно выполняется, она переходит ко второму условию внутри первого.
• Если оба условия верны, выполняется нужный код.

В коде это выглядит так:

if (условие1) {
 if (условие2) {
   // Этот код выполнится, если условие1 И условие2 истинны
 }
}

Пример с числом:

let value = 1243;
if (typeof value === 'number' && !isNaN(value)) {
   console.log("Введённое значение — число.");

   // Вложенный if: проверяем, чётное ли число
   if (value % 2 === 0) {
     console.log("Число чётное.");
   } else {
     console.log("Число нечётное.");
   }

 } else {
   console.log("Введённое значение — не число.");
 }

Что здесь происходит:

• Сначала программа проверяет: это вообще число?
• Если нет, выводит сообщение: «Это не число».
• Если да, идёт дальше и проверяет, чётное ли оно.
• Потом выводит результат: «Чётное» или «Нечётное».

Последовательность проверок if-else if‑else

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

Синтаксис конструкции if-else if-else:

if (условие1) {
 // Код выполняется, если условие1 истинно
} else if (условие2) {
 // Код выполняется, если условие1 ложно и условие2 истинно
} else {
 // Код выполняется, если все предыдущие условия ложны
}

Рассмотрим код:

let temperature = 25;

if (temperature > 30) {
 console.log("Очень жарко");
} else if (temperature > 20) {
 console.log("Тепло");
} else if (temperature > 10) {
 console.log("Прохладно");
} else {
 console.log("Холодно");
}
//'Тепло'

Код работает так:

• Сначала проверяется первое условие: temperature > 30. Если оно истинно, выполняется соответствующий блок кода (в консоль выводится сообщение «Очень жарко»), остальные проверки пропускаются.
• Если первое условие ложно, проверяется следующее: temperature > 20. Если оно истинно, выводится сообщение «Тепло», остальные проверки пропускаются.
• Если и второе условие ложно, проверяется третье: temperature > 10.
• Если ни одно из предыдущих условий не выполнено, срабатывает блок else, который обрабатывает все остальные случаи.

В примере температура 25 градусов, то есть первое условие ложно, а второе истинно, поэтому в консоль выведется «Тепло».

Рассмотрим пример, где вложенные if-else можно заменить на if-else if-else.

Пример с вложенными if-else:

let age = 25;
let hasDriverLicense = true;

if (age >= 18) {
   if (hasDriverLicense) {
       console.log("Вы можете водить машину.");
   } else {
       console.log("Вам нужно получить водительские права.");
   }
} else {
   console.log("Вам ещё рано водить машину.");
}

Улучшенный код с if-else if-else:

let age = 25;
let hasDriverLicense = true;

if (age < 18) {
   console.log("Вам ещё рано водить машину.");
} else if (!hasDriverLicense) {
   console.log("Вам нужно получить водительские права.");
} else {
   console.log("Вы можете водить машину.");
}

Почему так лучше:

• Все условия идут подряд, и сразу видно, в каком порядке они проверяются.
• Нет лишней вложенности — код проще читать и понимать.
• Такой вариант легче поддерживать: его проще дополнять, исправлять и объяснять другим.

Как работает тернарный оператор ? : и когда его стоит применять

Тернарный оператор ? : — это выражение, которое можно использовать вместо if‑else, когда нужно быстро вернуть значение. Главное отличие: if-else — это конструкция, а ? : — выражение, которое можно использовать в присваиваниях, возвращать из функции и так далее.

Его синтаксис выглядит так:

условие ? выражение_если_true : выражение_если_false;

Если условие true → выполняется первое выражение (после ?).

Если условие false → выполняется второе выражение (после :).

Слово «тернарный» переводится как «тройной», потому что в этой конструкции три части:

• Условие.
• Что делать, если оно истинно.
• Что делать, если оно ложно.

Тернарный оператор вместо if-else

Проверим число на чётность ещё раз. С if-else код будет выглядеть так:

let num = 7;
let result;

if (num % 2 === 0) {
   result = "Чётное число";
} else {
   result = "Нечётное число";
}

С ? : код будет короче, так как он позволяет сразу присвоить значение переменной:

let num = 7;
let result = num % 2 === 0 ? "Чётное число" : "Нечётное число";
console.log(result); // 'Нечётное число'

Если код сложный, лучше использовать обычный if-else. Когда условий много или логика запутанная, такой вариант проще читать и легче понять.

Вложенность тернарных операторов

? : можно вкладывать друг в друга. Но если вложенность больше 2–3 уровней, лучше использовать if-else, иначе код станет нечитаемым.

Например, определим, к какой категории из трёх — ребёнок, подросток или взрослый — относится человек в 20 лет. Код с if-else выглядит так:

let age = 20;
let message;

if (age < 12) {
   message = "Ребёнок";
} else if (age < 18) {
   message = "Подросток";
} else {
   message = "Взрослый";
}
// 'Взрослый'

В этом случае код с тернарным оператором читается хуже:

let age = 20;

let message = age < 12 ? "Ребёнок" : age < 18 ? "Подросток" : "Взрослый";
console.log(message); // 'Взрослый'

Когда использовать тернарные операторы

? : лучше использовать, когда проверка простая — одна строка, без сложных условий).

Лучше не использовать:

• если вложенность больше 2–3 уровней;
• если действий много;
• если условия сложные (&&, ||, >, <, ==, ===).

Во всех этих случаях код становится нечитаемым.

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

Оператор switch — это альтернатива if-else if-else. Он используется, когда нужно сравнить одно значение с несколькими вариантами (case). Эта конструкция проще и понятнее, чем длинная и сложная цепочка if-else.

Читайте также:

Циклы в JavaScript: какие бывают, чем различаются и зачем нужны

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

Программа берёт значение и сравнивает его с вариантами, которые вы задали:

switch (выражение) {
  case вариант1:
    // Что делать, если совпало с вариантом1
    break;
  case вариант2:
    // Что делать, если совпало с вариантом2
    break;
  default:
    // Что делать, если не совпало ни с одним вариантом
}

• switch (выражение) — выражение, значение которого мы будем проверять.
• case — это варианты, с которыми мы сравниваем.
• break — ключевое слово, которое означает «После выполнения кода выходим из switch».
• default — срабатывает, если ни один case не подошёл.

Обратите внимание, проверка switch — это строгое равенство, как оператор ===, то есть значения switch и case должны точно совпадать.

Возьмём коды ошибки с сервера и выведем сообщение о том, что они означают:

let errorCode = 404; // Пример кода ошибки

switch (errorCode) {
 case 200:
   console.log("OK: Запрос успешно обработан.");
   break;
 case 400:
   console.log("Некорректный запрос.");
   break;
 case 401:
   console.log("Требуется авторизация.");
   break;
 case 403:
   console.log("Доступ запрещен.");
   break;
 case 404:
   console.log("Ресурс не найден.");
   break;
 case 500:
   console.log("Ошибка сервера.");
   break;
 default:
   console.log("Неизвестная ошибка.");
}

Что делает программа:

• Сравнивает errorCode с каждым case.
• Находит подходящий (в нашем случае 404).

• Выполняет нужный код.

• break останавливает switch, чтобы не пошли лишние строки.
• Если ни один case не подошёл, срабатывает default.

Оператор break

Если не поставить break, программа не остановится, а продолжит выполнять всё дальше, — даже если это уже не нужно.

let errorCode = 404;

switch (errorCode) {
  case 404:
    console.log("Ресурс не найден");
  case 500:
    console.log("Ошибка сервера");
  default:
    console.log("Неизвестная ошибка");
}

Что выведется:

Ресурс не найден  
Ошибка сервера  
Неизвестная ошибка

После 404 нет break, и код пошёл выполняться дальше.

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

Возьмём для примера уровни доступа пользователя.

let role = "moderator";

switch (role) {
  case "admin":
    console.log("Доступ к админ-панели");
  case "moderator":
    console.log("Доступ к контенту");
  case "user":
    console.log("Доступ к сайту");
    break;
}

Здесь, если role = "admin" — сработают все три блока: admin → moderator → user. Если role = "moderator" — сработают moderator → user. Если role = "user" — только последний блок.

Объединение case

Иногда нужно, чтобы несколько значений делали одно и то же.

В switch это можно записать очень удобно: просто поставить несколько case подряд без кода между ними.

У нас есть переменная day, в ней день недели. Если это суббота или воскресенье, это выходной. Другие дни рабочие.

let day = "суббота";

switch (day) {
   case "суббота":
   case "воскресенье":
       console.log("Это выходной день!");
       break;
   case "понедельник":
   case "вторник":
   case "среда":
   case "четверг":
   case "пятница":
       console.log("Это рабочий день.");
       break;
   default:
       console.log("Некорректный день.");
}

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

• Программа проверяет day.
• Если это суббота или воскресенье, сработает блок «выходной день».
• То же самое с буднями: понедельники, вторники и остальные дни вызывают один и тот же вывод.

Несколько советов

Вот несколько рекомендаций по стилю кода для условных операторов в JavaScript:

• Всегда ставьте фигурные скобки {}, даже если код внутри — одна строка. Это защищает от случайных ошибок и делает структуру видимой.
• Открывающую скобку пишите на той же строке, что и if или else, — так принято в JavaScript.
• Используйте отступы, чтобы сразу было видно, что внутри условия, а что — снаружи.

Выглядит это вот так:

if (condition) {
  console.log("Условие выполнилось");
} else {
  console.log("Условие не выполнилось");
}

Оператор else-if

Пишите его на той же строке, где закрывается предыдущий блок:

if (x > 10) {
  // ...
} else if (x > 5) {
  // ...
} else {
  // ...
}

Оператор switch

• Делайте отступы для блоков кода внутри каждого case, чтобы код легко читался.
• Не забывайте про break, если не хотите, чтобы код «проваливался» дальше.

switch (role) {
  case "admin":
    console.log("Панель администратора");
    break;
  case "user":
    console.log("Обычный пользователь");
    break;
}

Тернарный оператор ? :

Используйте его только для простых проверок, когда всё умещается в одну строку:

const status = isOnline ? "В сети" : "Не в сети";

Если строка длинная, разбейте её на несколько с отступом. Так легче читать:

const message = isLoggedIn
  ? "Добро пожаловать!"
  : "Пожалуйста, войдите в систему.";

Какие ошибки допускают новички при работе с условными операторами

Ошибка: путают = и ===

Это одна из самых частых ошибок новичков.

В JavaScript знак = — это присваивание.

Вы говорите: «Сделай x равным 10».

А знак === — это проверка, то есть вопрос:

«Правда ли, что x равно 10?»

Неправильно:

let x = 5;

if (x = 10) {
 // Этот блок всегда выполняется, так как переменной x присваивается 10 и условие становится равно true 
 console.log("x равно 10");
}

Здесь в условии написано x = 10, то есть мы присваиваем x значение 10. Программа не сравнивает, а просто меняет значение переменной. При этом условие становится true, потому что 10 считается истинным значением. В результате этот блок всегда будет выполняться.

Нужно использовать ===, чтобы задать вопрос «Равно ли x десяти?».

let x = 5;

if (x === 10) {
  console.log("x равно 10");
}

Теперь программа действительно сравнивает, а не меняет x.

Ошибка: пропущены фигурные скобки

Иногда новички не ставят фигурные скобки {} после if, особенно если в блоке только одна строка. JavaScript такое позволяет, но это может привести к неожиданному поведению кода.

let y = 20;

if (y > 10)
  console.log("y больше 10");
  console.log("Это сообщение будет выводиться всегда");

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

Это может сбивать с толку. Выглядит так, будто всё работает внутри if, но на деле нет. И если позже вы добавите ещё одну строку, она тоже окажется вне условия и ошибок станет больше.

let y = 20;

if (y > 10) {
  console.log("y больше 10");
}

console.log("Это сообщение выводится всегда");

Теперь всё понятно:

• Если y > 10, сработает строка внутри скобок.
• Всё, что вне скобок, будет выполняться всегда.

Ошибка: не используется else-if

Иногда вместо else-if новички пишут вложенный if внутри else. Это работает, но делает код менее понятным и запутанным.

Неправильно:

let score = 85;

if (score >= 90) {
 console.log("Отлично");
} else {
 if (score >= 75) {
   console.log("Хорошо");
 }
}

Здесь всё выглядит сложно: одно условие внутри другого. Логика начинает теряться, особенно если таких проверок несколько.

Правильно:

let score = 45;

if (score >= 50) {
 console.log("Отлично");
} else if (score >= 30) {
 console.log("Хорошо");
} else {
 console.log("Нужно постараться");
}

Ошибка: отсутствует блок else при обработке всех возможных случаев

Иногда в коде обрабатываются разные случаи с помощью if и else-if, но про else в конце забывают. Кажется, что всё работает, — но только до тех пор, пока не появится неожиданный вариант. В этом случае программа просто ничего не сделает.

Пример

let color = "синий";

if (color === "красный") {
  console.log("Цвет красный");
} else if (color === "зелёный") {
  console.log("Цвет зелёный");
}

Такой код работает, только если значение — строго "красный" или "зелёный". Если подставить что-то другое, например "синий", ничего не произойдёт — консоль останется пустой.

Чтобы такого не случалось, стоит добавить else — он сработает, когда не подошёл ни один из вариантов:

let color = "синий";

if (color === "красный") {
  console.log("Цвет красный");
} else if (color === "зелёный") {
  console.log("Цвет зелёный");
} else {
  console.log("Другой цвет");
}

Теперь результат будет всегда. Даже если передано что-то неожиданное, код не зависнет в тишине, а честно напишет: «Другой цвет».