Условные операторы, if, else и switch в JavaScript: с чего начать и как не ошибиться
2026-02-21 09:57 Diff
https://skillbox.ru/media/code/uslovnye-operatory-if-else-i-switch-v-javascript-s-chego-nachat-i-kak-ne-oshibitsya/

#статьи

  • 25 июн 2025
  • 0

Разбираемся, как с помощью условий управлять логикой кода и не запутаться.

Иллюстрация: Оля Ежак для Skillbox Media

Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.

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

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

Содержание

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

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

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

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

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

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

  • Программа проверяет условие — например: 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 сам считает пустую строку ложной.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для таких случаев можно использовать вложенные условия — когда один 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 полезны, когда нужно проверить несколько условий, прежде чем выполнить какое-то действие. Слишком много вложенных if могут сделать код трудным для чтения.

Если таких проверок становится слишком много, лучше упростить их или переписать по-другому.

Если первоначальное условие в конструкции 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 градусов, то есть первое условие ложно, а второе истинно, поэтому в консоль выведется «Тепло».

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

Блок else в конце писать не обязательно. Если не нужно обрабатывать ситуацию, когда ни одно условие не подошло, можно его просто не добавлять.

Рассмотрим пример, где вложенные 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 код будет выглядеть так:

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

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

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, программа не остановится, а продолжит выполнять всё дальше, — даже если это уже не нужно.

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" — только последний блок.

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

В 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 новички пишут вложенный 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("Нужно постараться"); }

Иногда в коде обрабатываются разные случаи с помощью 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("Другой цвет"); }

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

Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе