Урок 11 из 49 · Месяц 2. Git и введение в JavaScript

Условные конструкции, операторы и let/const

Содержание урока

Программа становится по-настоящему полезной, когда умеет принимать решения: показать кнопку «Войти» гостю и «Выйти» — авторизованному пользователю, дать скидку, если сумма заказа больше 5000. В этом уроке разберём операторы JavaScript (арифметические, сравнения, логические), условные конструкции if, switch и тернарный оператор, а также современный способ объявлять переменные — let и const из стандарта ES6.

let и const — синтаксис ES6

ES6 (он же ECMAScript 2015) — большое обновление JavaScript, после которого язык стал современным. Именно оно принесло let, const, стрелочные функции, шаблонные строки и многое другое. До ES6 переменные объявляли только через var.

const — константа

const создаёт переменную, которую нельзя переприсвоить:

const birthYear = 2004;
birthYear = 2005; // TypeError: Assignment to constant variable.

Аналогия: const — коробка, заклеенная скотчем. Положили значение один раз — и всё.

Поэтому const обязательно получает значение сразу:

const pi;        // SyntaxError: Missing initializer in const declaration
const PI = 3.14; // так правильно

let — переменная, которую можно менять

let score = 0;
score = 10;
score = score + 5;
console.log(score); // 15

Почему не var

var работает «по-старому» и создаёт неожиданные ошибки:

console.log(city); // undefined — переменная «всплыла» (hoisting), ошибки нет
var city = "Ош";

if (true) {
  var secret = "видно снаружи";
}
console.log(secret); // "видно снаружи" — var не видит границ блока { }

С let и const такого нет — они живут только внутри блока { }, где объявлены, и недоступны до строки объявления:

if (true) {
  let message = "только внутри";
  console.log(message); // "только внутри"
}
console.log(message); // ReferenceError: message is not defined
var let const
Можно переприсвоить Да Да Нет
Область видимости Функция Блок { } Блок { }
Доступ до объявления undefined Ошибка Ошибка
Повторное объявление Можно Нельзя Нельзя

const и объекты

const запрещает заменить значение целиком, но не запрещает менять содержимое объекта или массива:

const user = { name: "Ali" };
user.name = "Ainura";   // можно — меняем свойство внутри
// user = {};           // нельзя — пытаемся положить в коробку другой объект

const list = [1, 2];
list.push(3);           // можно: [1, 2, 3]

Основные операторы

Оператор — это символ, который выполняет действие над значениями (операндами). В 2 + 3 оператор +, операнды — 2 и 3.

Арифметические

console.log(7 + 2);  // 9   сложение
console.log(7 - 2);  // 5   вычитание
console.log(7 * 2);  // 14  умножение
console.log(7 / 2);  // 3.5 деление
console.log(7 % 2);  // 1   остаток от деления
console.log(2 ** 3); // 8   возведение в степень

Остаток % очень полезен: n % 2 === 0 означает, что число чётное.

Присваивание и инкремент

let count = 10;
count += 5;  // то же, что count = count + 5  → 15
count -= 3;  // 12
count *= 2;  // 24
count++;     // увеличить на 1 → 25
count--;     // уменьшить на 1 → 24

Сравнение

Операторы сравнения возвращают true или false:

console.log(5 > 3);    // true
console.log(5 >= 5);   // true
console.log(2 < 1);    // false
console.log(5 === 5);  // true  строгое равенство
console.log(5 !== 3);  // true  строгое неравенство

== против ===

В JavaScript два вида равенства:

  • == (нестрогое) сначала приводит типы, потом сравнивает;
  • === (строгое) сравнивает и значение, и тип.
console.log(5 == "5");    // true  — строка превратилась в число
console.log(5 === "5");   // false — number и string разные типы
console.log(0 == false);  // true
console.log(0 === false); // false
console.log(null == undefined);  // true
console.log(null === undefined); // false

Логические операторы

  • && — И: true, если оба условия истинны;
  • || — ИЛИ: true, если хотя бы одно условие истинно;
  • ! — НЕ: переворачивает значение, !true → false.
const age = 20;
const hasTicket = true;

console.log(age >= 18 && hasTicket); // true — взрослый и с билетом
console.log(age < 12 || age > 65);   // false — ни ребёнок, ни пенсионер
console.log(!hasTicket);             // false

Truthy и falsy

В условиях любое значение превращается в true или false. Значений, которые становятся false (falsy), всего несколько — их стоит выучить:

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

Всё остальное — truthy, включая "0", "false", [] и {}.

const userName = "";
if (userName) {
  console.log("Привет, " + userName);
} else {
  console.log("Введите имя"); // сработает это: "" — falsy
}

Условные конструкции

if и else

if («если») выполняет блок кода, только когда условие истинно:

const temperature = 28;

if (temperature > 25) {
  console.log("Жарко, возьми воду");
}

else («иначе») — что сделать, если условие ложно:

const balance = 300;
const price = 500;

if (balance >= price) {
  console.log("Покупка прошла успешно");
} else {
  console.log("Недостаточно средств");
}

else if — несколько вариантов

const score = 76;

if (score >= 90) {
  console.log("Оценка: 5");
} else if (score >= 75) {
  console.log("Оценка: 4");
} else if (score >= 60) {
  console.log("Оценка: 3");
} else {
  console.log("Оценка: 2");
}

Разбор:

  1. JavaScript проверяет условия сверху вниз.
  2. 76 >= 90 — ложь, идём дальше.
  3. 76 >= 75 — истина: выводится «Оценка: 4», и остальные ветки пропускаются.
  4. else срабатывает, только если ни одно условие не подошло.

Порядок важен: если поставить score >= 60 первым, то и 95 баллов получат тройку.

Тернарный оператор

Короткая запись if/else, когда нужно выбрать одно из двух значений:

const age = 16;
const access = age >= 18 ? "Доступ разрешён" : "Доступ запрещён";
console.log(access); // Доступ запрещён

Схема: условие ? значение_если_да : значение_если_нет. Удобно для коротких выборов, но не вкладывайте тернарники друг в друга — код станет нечитаемым.

switch

switch удобен, когда одну переменную сравнивают с множеством конкретных значений:

const day = "сб";

switch (day) {
  case "пн":
  case "вт":
  case "ср":
  case "чт":
  case "пт":
    console.log("Рабочий день");
    break;
  case "сб":
  case "вс":
    console.log("Выходной!");
    break;
  default:
    console.log("Неизвестный день");
}
  • switch (day) — что сравниваем;
  • case "сб": — вариант значения; сравнение строгое, как ===;
  • несколько case подряд без кода — общая ветка для нескольких значений;
  • break — выход из switch. Без него выполнение «провалится» в следующий case;
  • default — срабатывает, если ни один case не подошёл (как else).

Пример: расчёт скидки

Соберём всё вместе:

const total = 7200;
const isMember = true;
const promoCode = "SALE10";

let discount = 0;

if (total >= 10000) {
  discount = 15;
} else if (total >= 5000 && isMember) {
  discount = 10;
}

if (promoCode === "SALE10") {
  discount += 5;
}

const finalPrice = total - (total * discount) / 100;
console.log(`Скидка: ${discount}%, к оплате: ${finalPrice}`);
// Скидка: 15%, к оплате: 6120

Здесь discount объявлена через let, потому что мы её меняем, а все остальные значения — через const. Сумма 7200 не дотягивает до 10000, но больше 5000 и клиент — участник клуба, поэтому сначала скидка 10%, затем промокод добавляет ещё 5%.

Пример: условие и ввод пользователя

prompt спрашивает у пользователя строку в окне браузера — для учебных примеров это удобно:

const answer = prompt("Сколько вам лет?");
const age = Number(answer);

if (answer === null || answer.trim() === "") {
  console.log("Вы ничего не ввели");
} else if (Number.isNaN(age)) {
  console.log("Это не число");
} else if (age >= 18) {
  console.log("Добро пожаловать!");
} else {
  console.log("Приходите, когда исполнится 18");
}
  • prompt возвращает строку или null, если нажали «Отмена»;
  • answer.trim() убирает пробелы по краям — так строка из одних пробелов считается пустой;
  • Number.isNaN(age) проверяет, получилось ли число. Обычное age === NaN всегда даёт false, потому что NaN не равно даже самому себе.

Типичные ошибки

  • Один знак = в условии. if (x = 5) не сравнивает, а присваивает — условие всегда истинно. Сравнение — ===.
  • Забытый break в switch — выполнятся сразу несколько веток.
  • Неправильный порядок else if — более широкое условие «съедает» узкие.
  • Сравнение строки с числом: значение из prompt или поля ввода — строка, "20" === 20 даст false. Приводите через Number().
  • Попытка изменить const — TypeError. Если значение должно меняться, используйте let.
  • Запись 10 < x < 20 — работает не так, как в математике. Пишите x > 10 && x < 20.

Практика

  1. Чётное или нечётное. Объявите const number = 17 и выведите «чётное» или «нечётное» с помощью % и тернарного оператора. Ожидаемый результат: «нечётное».
  2. Светофор. Через switch по переменной color ("red", "yellow", "green") выведите «Стой», «Жди», «Иди», а для любого другого значения — «Светофор сломан». Ожидаемый результат: правильная фраза для каждого цвета.
  3. Оценка за тест. Напишите цепочку if / else if / else, которая по баллам 0–100 выдаёт оценку от 2 до 5, а на число вне диапазона пишет «Некорректный балл». Ожидаемый результат: 105 и -3 дают сообщение об ошибке.
  4. Доставка. Есть const total и const city. Доставка бесплатная, если сумма от 3000 или город "Бишкек" и сумма от 1500; иначе — 200 сом. Выведите итоговую стоимость. Ожидаемый результат: для 2000 и «Бишкек» — 2000, для 2000 и «Ош» — 2200.
  5. Вход по возрасту через prompt. Спросите возраст и обработайте все случаи: «Отмена», пустой ввод, не число, отрицательное число, младше 18, 18 и старше. Ожидаемый результат: для каждого случая своё сообщение.

Итоги

  • По умолчанию используйте const, если значение меняется — let; var оставьте в прошлом.
  • let и const видны только внутри своего блока { }.
  • Сравнивайте только через === и !==.
  • && — «и», || — «или», ! — «не»; falsy-значений всего восемь.
  • if / else if / else проверяет условия сверху вниз до первого истинного.
  • Тернарный оператор выбирает одно из двух значений, switch — удобен для многих конкретных вариантов (не забывайте break).
Отзыв