Learn JavaScript

Условия if и else - базовая логика

Условия управляют выполнением кода: одни действия выполняются, когда проверка истинна, другие - когда ложна. Основная конструкция для этого - if / else. Это старт логического модуля, где важны понятные правила чтения и аккуратные проверки.

Как устроен if

if выполняет блок кода, если выражение в круглых скобках дает true.

const temperature = 22;

if (temperature > 20) {
  console.log("Warm");
}

Если условие ложно, блок пропускается.

else - вариант “иначе”

else запускается, когда условие в if ложно.

const temperature = 18;

if (temperature > 20) {
  console.log("Warm");
} else {
  console.log("Cool");
}

else if - цепочка проверок

Если вариантов больше двух, добавляют else if. Проверки идут сверху вниз, выполняется первый подходящий блок.

const score = 72;

if (score >= 90) {
  console.log("A");
} else if (score >= 75) {
  console.log("B");
} else if (score >= 60) {
  console.log("C");
} else {
  console.log("D");
}

Ориентир: условия должны быть расположены от более строгих к более общим, иначе логика может “перехватить” значение раньше.

Что считается true и false в условии

Условие в if (...) не обязано быть boolean. JavaScript приведет значение к boolean по правилам truthy/falsy.

Falsy значения (дают false):

  • false
  • 0 и -0
  • "" (пустая строка)
  • null
  • undefined
  • NaN

Все остальное - truthy (дает true).

if ("text") console.log("runs"); // выполнится
if ("") console.log("runs");     // не выполнится

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

Сравнения: что использовать в условиях

Чаще всего в условиях используются операторы сравнения:

  • === строгое равенство
  • !== строгое неравенство
  • >, >=, <, <= сравнение чисел и строк

Пример:

const age = 18;

if (age >= 18) {
  console.log("Allowed");
} else {
  console.log("Denied");
}

Почему лучше использовать === вместо ==

== может приводить типы и давать неожиданные результаты.

0 == "0";   // true
0 === "0";  // false

В условиях обычно применяют === и !==, чтобы сравнение было предсказуемым.

Логические операторы в условиях

Часто нужно объединять проверки.

И (&&) - обе части должны быть true:

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Enter");
}

ИЛИ (||) - достаточно, чтобы одна часть была true:

const isAdmin = false;
const isEditor = true;

if (isAdmin || isEditor) {
  console.log("Access");
}

НЕ (!) - инвертирует значение:

const isOnline = false;

if (!isOnline) {
  console.log("Offline");
}

Блоки и область видимости

Фигурные скобки { ... } создают блок. Переменные, объявленные через let и const внутри блока, снаружи недоступны.

if (true) {
  const message = "Inside";
  console.log(message);
}

// console.log(message); // ReferenceError

Частые ошибки

Ошибка - перепутать = и ===

= - присваивание, === - сравнение. В условии нужен оператор сравнения.

let x = 1;

// if (x = 2) { ... }  // ошибка логики, меняется значение
if (x === 2) {
  console.log("Two");
}

Ошибка - неверный порядок проверок

Если сначала поставить слишком широкое условие, остальные ветки не сработают.

const n = 10;

if (n > 0) {
  console.log("positive");
} else if (n > 100) {
  console.log("large");
}

Ветка n > 100 никогда не выполнится. Правильнее проверять “крупное” раньше:

const n = 10;

if (n > 100) {
  console.log("large");
} else if (n > 0) {
  console.log("positive");
}

Ошибка - полагаться на неявную truthy/falsy логику там, где нужна точность

Пример: 0 и "" - falsy, но это могут быть допустимые значения. Если нужно проверять именно null или undefined, лучше делать явную проверку.

const value = 0;

// if (value) { ... } // не выполнится, хотя value задано
if (value === 0) {
  console.log("Value is zero");
}

Быстрая памятка

  • if - выполнить блок, если условие true
  • else - выполнить блок, если условие false
  • else if - несколько вариантов проверок
  • === и !== - предсказуемые сравнения без приведения типов
  • &&, ||, ! - комбинирование условий

Короткий итог

if / else - базовый инструмент логики. Он читается проще всего, когда условия точные, порядок проверок продуман, а сравнения выполняются через === и !==.