Урок 11 из 49 · Месяц 2. Git и введение в JavaScript
Условные конструкции, операторы и let/const
Содержание урока
- let и const — синтаксис ES6
- const — константа
- let — переменная, которую можно менять
- Почему не var
- const и объекты
- Основные операторы
- Арифметические
- Присваивание и инкремент
- Сравнение
- == против ===
- Логические операторы
- Truthy и falsy
- Условные конструкции
- if и else
- else if — несколько вариантов
- Тернарный оператор
- switch
- Пример: расчёт скидки
- Пример: условие и ввод пользователя
- Типичные ошибки
- Практика
- Итоги
Программа становится по-настоящему полезной, когда умеет принимать решения: показать кнопку «Войти» гостю и «Выйти» — авторизованному пользователю, дать скидку, если сумма заказа больше 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");
}
Разбор:
- JavaScript проверяет условия сверху вниз.
76 >= 90— ложь, идём дальше.76 >= 75— истина: выводится «Оценка: 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.
Практика
- Чётное или нечётное. Объявите
const number = 17и выведите «чётное» или «нечётное» с помощью%и тернарного оператора. Ожидаемый результат: «нечётное». - Светофор. Через
switchпо переменнойcolor("red","yellow","green") выведите «Стой», «Жди», «Иди», а для любого другого значения — «Светофор сломан». Ожидаемый результат: правильная фраза для каждого цвета. - Оценка за тест. Напишите цепочку
if / else if / else, которая по баллам 0–100 выдаёт оценку от 2 до 5, а на число вне диапазона пишет «Некорректный балл». Ожидаемый результат: 105 и -3 дают сообщение об ошибке. - Доставка. Есть
const totalиconst city. Доставка бесплатная, если сумма от 3000 или город"Бишкек"и сумма от 1500; иначе — 200 сом. Выведите итоговую стоимость. Ожидаемый результат: для 2000 и «Бишкек» — 2000, для 2000 и «Ош» — 2200. - Вход по возрасту через prompt. Спросите возраст и обработайте все случаи: «Отмена», пустой ввод, не число, отрицательное число, младше 18, 18 и старше. Ожидаемый результат: для каждого случая своё сообщение.
Итоги
- По умолчанию используйте
const, если значение меняется —let;varоставьте в прошлом. letиconstвидны только внутри своего блока{ }.- Сравнивайте только через
===и!==. &&— «и»,||— «или»,!— «не»; falsy-значений всего восемь.if / else if / elseпроверяет условия сверху вниз до первого истинного.- Тернарный оператор выбирает одно из двух значений,
switch— удобен для многих конкретных вариантов (не забывайтеbreak).