Оператор if и операторы сравнения — Javascript (часть 1)

Когда мы пишем программы, нам часто нужно, чтобы код реагировал на разные ситуации. Например, интернет-магазин должен показывать кнопку "В корзину", если товар есть в наличии, или "Нет в наличии" — если его уже разобрали.

В JavaScript за принятие таких решений отвечает условный оператор if. Он позволяет программе проверять условия и выполнять разные блоки кода в зависимости от того, истинны они или ложны. Чтобы создавать условия, нам нужны операторы сравнения — специальные инструменты, которые сравнивают значения.

Сегодня мы разберём, как работает if, чем отличаются == и ===, что такое != и !==, как сравнивать числа и строки, и как правильно строить цепочки условий.

Что вы узнаете в рамках статьи

Зачем нужен условный оператор в JavaScript.
Как писать условия с if, else и else if.
Чем отличаются операторы сравнения == и ===, != и !==.
Как использовать сравнения >, <, >=, <=.
Различия между else if и несколькими независимыми if.
Типичные ошибки при работе с условиями.

Ключевые термины

Условный оператор — конструкция, которая позволяет выполнить код только при выполнении определённого условия.
Оператор сравнения — символ или комбинация символов, которая сравнивает два значения и возвращает true или false.
Равенство с приведением типов (==) — сравнение, при котором JavaScript автоматически преобразует типы перед сравнением.
Строгое равенство (===) — сравнение без преобразования типов, учитывается и тип, и значение.
Неравенство с приведением (!=) — проверка, что значения не равны, с преобразованием типов.
Строгое неравенство (!==) — проверка, что значения не равны без преобразования типов.
Логический блок else — выполняется, если все предыдущие условия ложны.
Логический блок else if — дополнительная проверка, выполняется, если предыдущие условия ложны.

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

В реальной жизни мы постоянно принимаем решения, основываясь на обстоятельствах. Мы оцениваем ситуацию, проверяем условия и выбираем, как действовать.

Пример из жизни:

Если на улице идёт дождь — вы берёте зонтик.
Если дождя нет — зонтик не нужен.

Это и есть логика, которую в программировании реализует условный оператор.

Что такое условный оператор в программировании

Условный оператор — это инструмент, который позволяет программе принять решение: выполнить один блок кода, если условие истинно (true), и другой блок, если условие ложно (false).

Благодаря этому программы становятся динамичными и могут реагировать на изменения данных или внешней среды.

Почему он нужен

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

С условными операторами мы можем:

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

Пример: прогулка и зонтик

const isRaining = true;

if (isRaining) {
  console.log('Возьми зонтик!');
} else {
  console.log('Зонтик не нужен.');
}

Разберём построчно:

const isRaining = true; — мы создаём переменную, которая хранит информацию о погоде (true = дождь идёт).
if (isRaining) — проверяем условие: если значение isRaining равно true, выполняется первый блок кода.
console.log('Возьми зонтик!'); — это действие, которое произойдёт, если условие истинно.
else { ... } — альтернативный блок: он выполнится, если условие ложно (false).

Как это работает в логике программы

Значение `isRaining`	Что выполняется
`true`	Возьми зонтик!
`false`	Зонтик не нужен.

Ещё один пример из программирования — авторизация пользователя:

const isLoggedIn = false;

if (isLoggedIn) {
  console.log('Добро пожаловать!');
} else {
  console.log('Пожалуйста, войдите в систему.');
}

Если isLoggedIn = true → пользователь видит приветствие.
Если false → программа просит войти в систему.

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

2. Операторы сравнения

Операторы сравнения в JavaScript позволяют сопоставлять значения и возвращают результат в виде логического значения — true или false. Они активно используются в условных операторах (if, else if), чтобы программа могла принимать решения.

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

Равенство с приведением типов (`==`)

Оператор == сравнивает два значения, автоматически приводя их к одному типу. Это называется нестрогое сравнение.

console.log(5 == '5'); // true

В этом примере число 5 и строка '5' считаются равными, потому что строка '5' автоматически преобразуется в число 5.

Опасность: иногда преобразования типов дают неожиданные результаты:

console.log(0 == false); // true
console.log('' == 0);    // true

В этих случаях может быть сложно понять, почему результат именно такой.

Строгое равенство (`===`)

Оператор === сравнивает значения и их типы. Это строгое сравнение, без автоматического преобразования.

console.log(5 === '5'); // false
console.log(5 === 5);   // true

Рекомендация: в реальной практике используйте всегда ===, чтобы избежать непредсказуемого поведения.

Неравенство с приведением типов (`!=`)

Оператор != проверяет, не равны ли значения, при этом игнорирует тип (аналогично ==).

console.log(5 != '5'); // false
console.log(5 != 10);  // true

Из-за преобразования типов возможны те же неожиданные ситуации, что и с ==.

Строгое неравенство (`!==`)

Оператор !== проверяет, не равны ли значения, учитывая и тип, и значение.

console.log(5 !== '5'); // true
console.log(5 !== 5);   // false

Рекомендация: используйте только !== для большей предсказуемости.

Сравнения чисел (`>`, `<`, `>=`, `<=`)

Эти операторы позволяют сравнивать числа и строки (строки сравниваются по Unicode-кодам символов).

console.log(10 > 5);    // true
console.log(5 < 10);    // true
console.log(10 >= 10);  // true
console.log(5 <= 10);   // true

Интересный момент: при сравнении строк сравнение идёт по символам слева направо:

console.log('apple' < 'banana'); // true, потому что 'a' < 'b'

3. Конструкция if, else и else if

Условные конструкции позволяют реагировать на разные ситуации в коде и выполнять разные действия в зависимости от условий. В JavaScript для этого используются ключевые слова if, else и else if.

Простой `if`

Оператор if проверяет условие и выполняет код только если оно истинно (true). Если условие ложно (false), код внутри блока не выполняется.

const temperature = 25;

if (temperature > 20) {
  console.log('Идеальная погода для прогулки.');
}

Разбор:

temperature > 20 → сравниваем температуру с 20.
Если это правда, выводим сообщение.
Если ложь — ничего не произойдёт.

Такой вариант подходит, если нужно сделать действие только в одном случае.

`if` + `else`

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

if (temperature > 20) {
  console.log('Идеальная погода для прогулки.');
} else {
  console.log('Может быть, лучше остаться дома.');
}

Разбор:

Если temperature > 20 → выполняется первый блок.
Если условие не выполняется → выполняется блок после else.

`if` + `else if` + `else`

Иногда одного условия недостаточно. В таких случаях можно проверить несколько вариантов с помощью else if.

const num = 0;

if (num > 0) {
  console.log('Число положительное');
} else if (num < 0) {
  console.log('Число отрицательное');
} else {
  console.log('Число равно нулю');
}

Разбор:

Если num > 0 → выполняется первый блок.
Если первое условие ложно, проверяется num < 0.
Если и второе условие ложно, выполняется else.

Правила:

В конструкции должен быть только один if в начале.

else всегда стоит в конце и может быть только один.

else if можно использовать сколько угодно раз.

Как только одно условие окажется истинным — проверка дальше не идёт.

4. else if vs несколько if

Иногда в коде нужно проверить несколько условий. Тут у нас есть два подхода: использовать цепочку if + else if или написать несколько отдельных if. Они похожи, но работают по-разному.

Подход с `else if`

Условия проверяются строго сверху вниз.
Как только одно условие окажется истинным (true) — остальные даже не проверяются.
Используется, когда нужно выбрать только один вариант из нескольких.

Пример:

const score = 85;

if (score >= 90) {
  console.log('Отлично');
} else if (score >= 75) {
  console.log('Хорошо');
} else if (score >= 60) {
  console.log('Удовлетворительно');
} else {
  console.log('Нужно подтянуть знания');
}

Разбор:

Если score = 85 → первое условие (score >= 90) ложно.
Проверяется второе (score >= 75) → истинно, выполняется console.log('Хорошо').
Дальше проверка не идёт, даже если другие условия тоже могли бы быть верными.

Подход с несколькими `if`

Каждое условие проверяется независимо от других.
Можно выполнить несколько блоков кода, если сработают сразу несколько условий.
Используется, когда условия не исключают друг друга и могут быть выполнены одновременно.

Пример:

const temperature = 25;

if (temperature > 20) {
  console.log('Тепло');
}

if (temperature < 30) {
  console.log('Не жарко');
}

Разбор:

Первая проверка (temperature > 20) → true, выводится "Тепло".
Вторая проверка (temperature < 30) → тоже true, выводится "Не жарко".
В итоге программа выполнит оба действия.

Как выбрать подход

Используем else if, если условия взаимоисключающие (срабатывает только один вариант).
Используем несколько if, если каждое условие важно проверить, даже если другие условия уже выполнены.

Наиболее частые вопросы

Вопрос: Можно ли использовать if без фигурных скобок?\
Ответ: Да, если в блоке только одна инструкция, но для читаемости лучше всегда писать скобки.

Вопрос: Что быстрее — == или ===?\
Ответ: Разница незначительна, но === предпочтительнее, так как безопаснее.

Вопрос: Можно ли сравнивать строки с < и >?\
Ответ: Да, сравнение будет по Unicode-кодам символов.

Итоги

Сегодня мы разобрали:

Что такое условный оператор и зачем он нужен.
Как работают if, else, else if.
Чем отличаются == и ===, != и !==.
Как использовать операторы сравнения чисел и строк.

Теперь вы можете писать код, который принимает решения в зависимости от условий, и избегать ошибок, связанных с неправильным сравнением данных.

Что вы узнаете в рамках статьи

Ключевые термины

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

Что такое условный оператор в программировании

Почему он нужен

Пример: прогулка и зонтик

Как это работает в логике программы

2. Операторы сравнения

Равенство с приведением типов (==)

Строгое равенство (===)

Неравенство с приведением типов (!=)

Строгое неравенство (!==)

Сравнения чисел (>, <, >=, <=)

3. Конструкция if, else и else if

Простой if

if + else

if + else if + else

4. else if vs несколько if

Подход с else if

Подход с несколькими if

Как выбрать подход

Наиболее частые вопросы

Итоги

Равенство с приведением типов (`==`)

Строгое равенство (`===`)

Неравенство с приведением типов (`!=`)

Строгое неравенство (`!==`)

Сравнения чисел (`>`, `<`, `>=`, `<=`)

Простой `if`

`if` + `else`

`if` + `else if` + `else`

Подход с `else if`

Подход с несколькими `if`