Разбираемся, как с помощью условий управлять логикой кода и не запутаться.
Когда вы пишете программу, часто нужно, чтобы она принимала решения — например, проверяла пароль, выбирала нужный вариант оформления или подсказывала пользователю, что делать дальше. Для этого в 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).
- числа, кроме 0: 42, -42, 3.14;
- любая непустая строка: “Hello”, “false”;
- пустой массив: [];
- пустой объект: {};
- любая функция, независимо от содержимого, даже пустая: function() {};
- положительная и отрицательная бесконечность: Infinity и -Infinity.
Если в if попадёт одно из этих значений, условие сработает.
if (“hello”) { console.log(“И тебе привет”); // Это сработает, потому что строка не пустая }
- 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 — выбор между вариантами
Оператор 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 полезны, когда нужно проверить несколько условий, прежде чем выполнить какое-то действие. Слишком много вложенных if могут сделать код трудным для чтения.
Если таких проверок становится слишком много, лучше упростить их или переписать по-другому.
Последовательность проверок 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 градусов, то есть первое условие ложно, а второе истинно, поэтому в консоль выведется «Тепло».
Конструкция 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
Проверим число на чётность ещё раз. С 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.
Как работает 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(“Условие не выполнилось”); }
Пишите его на той же строке, где закрывается предыдущий блок:
if (x > 10) { // … } else if (x > 5) { // … } else { // … }
- Делайте отступы для блоков кода внутри каждого 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(“Другой цвет”); }
Теперь результат будет всегда. Даже если передано что-то неожиданное, код не зависнет в тишине, а честно напишет: «Другой цвет».