Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>25 июн 2025</li>

3 <li>0</li>

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

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

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

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

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

9 Содержание

10 <ul><li><a>Зачем нужны условные операторы</a></li>

11 <li><a>Как это работает</a></li>

12 <li><a>Виды условных операторов</a></li>

13 <li><a>Оператор if-else - выбор между вариантами</a></li>

14 <li><a>Вложенный if-else</a></li>

15 <li><a>Последовательность проверок if-else if-else</a></li>

16 <li><a>Как работает тернарный оператор (? :) и когда его стоит применять</a></li>

17 <li><a>Конструкция switch в JavaScript</a></li>

18 <li><a>Несколько советов</a></li>

19 <li><a>Какие ошибки допускают новички при работе с условными операторами</a></li>

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

21 <ul><li>Управлять выполнением программы.Например, если корзина пользователя пуста, вывести сообщение об этом. Если нет - показать добавленные товары.</li>

22 <li>Реагировать на разные ситуации.Если пользователь ввёл неверный пароль, программа должна сообщить об ошибке.</li>

23 <li>Строить гибкую логику.С помощью условий можно обрабатывать пользовательский ввод, выбирать поведение компонента, принимать решения на основе данных.</li>

24 <li>Избегать дублирования кода.Вложенные условия позволяют использовать одну и ту же структуру для разных сценариев.</li>

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

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

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

28 <ul><li>Программа проверяет условие - например: a > 10.</li>

29 <li>Если это правда (условие даёт true), выполняется код внутри блока if.</li>

30 <li>Если это неправда (условие даёт false), выполняется блок else, если он есть.</li>

31 </ul>Например:

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

33 <ul><li>Программа проверяет, набрал ли участник теста 50 баллов; для этого значение score должно быть больше или равно 50.</li>

34 <li>Если да, в консоль выводится "Вы прошли тест!".</li>

35 <li>Если нет, выводится "Попробуйте ещё раз".</li>

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

37 Сравнения:

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

39 if (a > 5 && b < 10) { // && - логическое И: оба условия должны быть истинны } if (role === 'admin' || role === 'moderator') { // || - логическое ИЛИ: достаточно, чтобы одно из условий было истинным } if (!isBlocked) { // ! - логическое НЕ: условие срабатывает, если isBlocked - false }Булевы значения

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

41 Например:

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

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

44 if (isAdmin) { console.log("Показать панель управления?"); }Если пользователь - администратор, у него спросят, хочет ли он увидеть панель управления, а если нет, блок кода не выполнится.

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

46 <ul><li>isOnline = false - пользователь не в сети,</li>

47 <li>hasAccess = true - доступ разрешён,</li>

48 <li>isPaid = false - товар не оплачен.</li>

49 </ul>Что ещё можно использовать в условии

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

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

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

53 <ul><li>числа, кроме 0: 42, -42, 3.14;</li>

54 <li>любая непустая строка: "Hello", "false";</li>

55 <li>пустой массив: [];</li>

56 <li>пустой объект: {};</li>

57 <li>любая функция, независимо от содержимого, даже пустая: function() {};</li>

58 <li>положительная и отрицательная бесконечность: Infinity и -Infinity.</li>

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

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

61 <ul><li>false - булево значение false;</li>

62 <li>0 - число ноль;</li>

63 <li>"" или '' - пустая строка;</li>

64 <li>null - отсутствие значения;</li>

65 <li>undefined - неопределённое значение;</li>

66 <li>NaN - "не число" (Not-a-Number).</li>

67 </ul>let x = ""; // falsy if (x) { console.log("x - истинное значение"); // Этот блок не выполняется } else { console.log("x - ложное значение"); // Этот блок выполняется }Истинные и ложные значения удобны, например, при проверке ввода:

68 let name = prompt("Введите имя"); if (name) { console.log("Здравствуйте, " + name); } else { console.log("Вы не ввели имя"); }Здесь не нужно писать name!=="" - JavaScript сам считает пустую строку ложной.

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

70 <ul><li>if и if-else - самая часто встречающаяся конструкция. Мы выше писали, как она работает: если условие истинно, что-то происходит, если ложно - происходит что-то другое.</li>

71 <li>Тернарный оператор (? :) - короткая форма if-else. Работает по принципу if-else, но это выражение, а не конструкция, то есть результат можно сразу присвоить переменной.</li>

72 <li>switch - выбирает не из двух вариантов, а из нескольких. Программа смотрит на значение и сравнивает его с готовым списком вариантов. Например, если день недели - понедельник, делаем одно. Если вторник - другое.</li>

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

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

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

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

77 <ul><li>Условие (if). Записывается в скобках после ключевого слова if.</li>

78 <li>Блок кода ({}). Если условие истинно, выполняется блок кода, заключённый в фигурные скобки {} после условия if.</li>

79 <li>Необязательный блок кода (else). Если условие ложно, выполняется блок кода, заключённый в фигурные скобки {} после ключевого слова else.</li>

80 </ul>Оператор if работает так:

81 <ul><li>Проверяется заданное условие.</li>

82 <li>Если оно истинно, выполняется блок кода внутри оператора if.</li>

83 <li>Если условие ложно (false), этот блок кода пропускается и программа выполняется дальше.</li>

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

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

86 let light = "green"; if (light === "green") { console.log("Можете идти"); }<ul><li>Здесь условие light === "green" проверяет, равно ли значение переменной light строке "green".</li>

87 <li>Если условие истинно, то на экран выводится сообщение "Можете идти".</li>

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

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

90 if (light === "green") { console.log("Можете идти"); } else { console.log("Ждите"); }Теперь, если цвет любой другой, кроме зелёного, выведется команда "Ждите".

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

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

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

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

95 <ul><li>Сначала программа проверяет первое условие.</li>

96 <li>Если оно выполняется, она переходит ко второму условию внутри первого.</li>

97 <li>Если оба условия верны, выполняется нужный код.</li>

98 </ul>В коде это выглядит так:

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

100 let value = 1243; if (typeof value === 'number' && !isNaN(value)) { console.log("Введённое значение - число."); // Вложенный if: проверяем, чётное ли число if (value % 2 === 0) { console.log("Число чётное."); } else { console.log("Число нечётное."); } } else { console.log("Введённое значение - не число."); }Что здесь происходит:

101 <ul><li>Сначала программа проверяет: это вообще число?</li>

102 <li>Если нет, выводит сообщение: "Это не число".</li>

103 <li>Если да, идёт дальше и проверяет, чётное ли оно.</li>

104 <li>Потом выводит результат: "Чётное" или "Нечётное".</li>

105 </ul>Вложенные конструкции if полезны, когда нужно проверить несколько условий, прежде чем выполнить какое-то действие. Слишком много вложенных if могут сделать код трудным для чтения.

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

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

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

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

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

111 <ul><li>Сначала проверяется первое условие: temperature > 30. Если оно истинно, выполняется соответствующий блок кода (в консоль выводится сообщение "Очень жарко"), остальные проверки пропускаются.</li>

112 <li>Если первое условие ложно, проверяется следующее: temperature > 20. Если оно истинно, выводится сообщение "Тепло", остальные проверки пропускаются.</li>

113 <li>Если и второе условие ложно, проверяется третье: temperature > 10.</li>

114 <li>Если ни одно из предыдущих условий не выполнено, срабатывает блок else, который обрабатывает все остальные случаи.</li>

115 </ul>В примере температура 25 градусов, то есть первое условие ложно, а второе истинно, поэтому в консоль выведется "Тепло".

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

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

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

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

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

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

122 <ul><li>Все условия идут подряд, и сразу видно, в каком порядке они проверяются.</li>

123 <li>Нет лишней вложенности - код проще читать и понимать.</li>

124 <li>Такой вариант легче поддерживать: его проще дополнять, исправлять и объяснять другим.</li>

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

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

127 условие ? выражение_если_true : выражение_если_false;Если условие true → выполняется первое выражение (после ?).

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

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

130 <ul><li>Условие.</li>

131 <li>Что делать, если оно истинно.</li>

132 <li>Что делать, если оно ложно.</li>

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

134 let num = 7; let result; if (num % 2 === 0) { result = "Чётное число"; } else { result = "Нечётное число"; }С ? : код будет короче, так как он позволяет сразу присвоить значение переменной:

135 let num = 7; let result = num % 2 === 0 ? "Чётное число" : "Нечётное число"; console.log(result); // 'Нечётное число'Если код сложный, лучше использовать обычный if-else. Когда условий много или логика запутанная, такой вариант проще читать и легче понять.

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

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

138 let age = 20; let message; if (age < 12) { message = "Ребёнок"; } else if (age < 18) { message = "Подросток"; } else { message = "Взрослый"; } // 'Взрослый'В этом случае код с тернарным оператором читается хуже:

139 let age = 20; let message = age < 12 ? "Ребёнок" : age < 18 ? "Подросток" : "Взрослый"; console.log(message); // 'Взрослый'? : лучше использовать, когда проверка простая - одна строка, без сложных условий).

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

141 <ul><li>если вложенность больше 2-3 уровней;</li>

142 <li>если действий много;</li>

143 <li>если условия сложные (&&, ||, >, <, ==, ===).</li>

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

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

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

147 switch (выражение) { case вариант1: // Что делать, если совпало с вариантом1 break; case вариант2: // Что делать, если совпало с вариантом2 break; default: // Что делать, если не совпало ни с одним вариантом }<ul><li>switch (выражение) - выражение, значение которого мы будем проверять.</li>

148 <li>case - это варианты, с которыми мы сравниваем.</li>

149 <li>break - ключевое слово, которое означает "После выполнения кода выходим из switch".</li>

150 <li>default - срабатывает, если ни один case не подошёл.</li>

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

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

153 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("Неизвестная ошибка."); }Что делает программа:

154 <ul><li>Сравнивает errorCode с каждым case.</li>

155 <li>Находит подходящий (в нашем случае 404).</li>

156 </ul><ul><li>Выполняет нужный код.</li>

157 </ul><ul><li>break останавливает switch, чтобы не пошли лишние строки.</li>

158 <li>Если ни один case не подошёл, срабатывает default.</li>

159 </ul>Если не поставить break, программа не остановится, а продолжит выполнять всё дальше, - даже если это уже не нужно.

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

161 Ресурс не найден Ошибка сервера Неизвестная ошибкаПосле 404 нет break, и код пошёл выполняться дальше.

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

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

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

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

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

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

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

169 <ul><li>Программа проверяет day.</li>

170 <li>Если это суббота или воскресенье, сработает блок "выходной день".</li>

171 <li>То же самое с буднями: понедельники, вторники и остальные дни вызывают один и тот же вывод.</li>

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

173 <ul><li>Всегда ставьте фигурные скобки {}, даже если код внутри - одна строка. Это защищает от случайных ошибок и делает структуру видимой.</li>

174 <li>Открывающую скобку пишите на той же строке, что и if или else, - так принято в JavaScript.</li>

175 <li>Используйте отступы, чтобы сразу было видно, что внутри условия, а что - снаружи.</li>

176 </ul>Выглядит это вот так:

177 if (condition) { console.log("Условие выполнилось"); } else { console.log("Условие не выполнилось"); }Операторelse-if

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

179 if (x > 10) { // ... } else if (x > 5) { // ... } else { // ... }Операторswitch

180 <ul><li>Делайте отступы для блоков кода внутри каждого case, чтобы код легко читался.</li>

181 <li>Не забывайте про break, если не хотите, чтобы код "проваливался" дальше.</li>

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

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

184 const status = isOnline ? "В сети" : "Не в сети";Если строка длинная, разбейте её на несколько с отступом. Так легче читать:

185 const message = isLoggedIn ? "Добро пожаловать!" : "Пожалуйста, войдите в систему.";Это одна из самых частых ошибок новичков.

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

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

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

189 "Правда ли, что x равно 10?"

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

191 let x = 5; if (x = 10) { // Этот блок всегда выполняется, так как переменной x присваивается 10 и условие становится равно true console.log("x равно 10"); }Здесь в условии написано x = 10, то есть мы присваиваем x значение 10. Программа не сравнивает, а просто меняет значение переменной. При этом условие становится true, потому что 10 считается истинным значением. В результате этот блок всегда будет выполняться.

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

193 let x = 5; if (x === 10) { console.log("x равно 10"); }Теперь программа действительно сравнивает, а не меняет x.

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

195 let y = 20; if (y > 10) console.log("y больше 10"); console.log("Это сообщение будет выводиться всегда");На первый взгляд кажется, что обе строки зависят от условия. Но на самом деле только первая строка относится к if. Вторая выполняется всегда, независимо от условия.

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

197 let y = 20; if (y > 10) { console.log("y больше 10"); } console.log("Это сообщение выводится всегда");Теперь всё понятно:

198 <ul><li>Если y > 10, сработает строка внутри скобок.</li>

199 <li>Всё, что вне скобок, будет выполняться всегда.</li>

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

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

202 let score = 85; if (score >= 90) { console.log("Отлично"); } else { if (score >= 75) { console.log("Хорошо"); } }Здесь всё выглядит сложно: одно условие внутри другого. Логика начинает теряться, особенно если таких проверок несколько.

203 Правильно:

204 let score = 45; if (score >= 50) { console.log("Отлично"); } else if (score >= 30) { console.log("Хорошо"); } else { console.log("Нужно постараться"); }Иногда в коде обрабатываются разные случаи с помощью if и else-if, но про else в конце забывают. Кажется, что всё работает, - но только до тех пор, пока не появится неожиданный вариант. В этом случае программа просто ничего не сделает.

205 Пример

206 let color = "синий"; if (color === "красный") { console.log("Цвет красный"); } else if (color === "зелёный") { console.log("Цвет зелёный"); }Такой код работает, только если значение - строго "красный" или "зелёный". Если подставить что-то другое, например "синий", ничего не произойдёт - консоль останется пустой.

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

208 let color = "синий"; if (color === "красный") { console.log("Цвет красный"); } else if (color === "зелёный") { console.log("Цвет зелёный"); } else { console.log("Другой цвет"); }Теперь результат будет всегда. Даже если передано что-то неожиданное, код не зависнет в тишине, а честно напишет: "Другой цвет".

209 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>