JavaScript / 40 минут
Значения и переменные
Различайте const и let, работайте с числами и шаблонными строками.
- Различайте const и let, работайте с числами и шаблонными строками.
- Применить тему в задаче «Значения и переменные» и объяснить граничные случаи.
Около 10 минут на чтение и разбор примеров. Практика — отдельно, в своём темпе.
Переменная как связь имени со значением
Программа постоянно работает со значениями: именем пользователя, количеством попыток, состоянием загрузки. Переменная даёт значению имя, чтобы не повторять вычисление и передавать результат следующим действиям. Объявление const name = 'Анна' создаёт связь имени name со строковым значением. Имя не является самой строкой, а знак равенства здесь означает присваивание, а не математическое утверждение о равенстве.
JavaScript относится к языкам с динамической типизацией: тип принадлежит значению, а одна переменная let может в разные моменты ссылаться на значения разных типов. Это разрешено языком, но далеко не всегда полезно для читаемости. Если переменная сначала хранит число, а затем строку ошибки, каждое её использование должно учитывать оба варианта. Лучше выбирать имена и форму данных так, чтобы назначение значения оставалось понятным.
const course = 'JavaScript';
let completed = 0;
completed = completed + 1;
console.log(course, completed);Правая часть последнего присваивания вычисляется по старому значению completed. Только после вычисления 0 + 1 новая единица связывается с именем. Сокращённая запись completed += 1 делает то же обновление. Переменная course не менялась: использовать имя и переназначить имя — разные операции.
const, let и границы блока
Используйте const, когда не собираетесь переназначать переменную. Если значение нужно менять в ходе работы, выбирайте let. Это описание намерения помогает читателю: у счётчика ожидаются обновления, у параметров подключения обычно нет. Не используйте var в новом учебном коде по привычке из старых примеров: у него другая область видимости и особенности поднятия объявлений, которые легко скрывают ошибки.
let и const доступны в блоке фигурных скобок, где объявлены, и во вложенных блоках. Объявление внутри if не делает переменную доступной снаружи. При необходимости результата обеих ветвей объявите переменную до условия или верните результат из функции. До выполнения строки объявления let и const находятся в зоне временной недоступности: наличие объявления в файле не разрешает читать значение раньше этой строки.
let message;
if (true) {
const language = 'JS';
message = `Изучаем ${language}`;
}
console.log(message); // Изучаем JS
// console.log(language); // ReferenceErrorПримитивные значения и объекты
К примитивным типам относятся undefined, null, boolean, number, bigint, string и symbol. Строки и числа неизменяемы: операция со строкой создаёт другую строку, а не переписывает её символы на месте. Объекты, включая массивы и функции, ведут себя иначе: у них есть идентичность и изменяемые свойства. На этом различии основано множество неожиданностей с копированием и сравнением.
Если два имени связаны с одним объектом, изменение его свойства видно через оба имени. const запрещает заменить объект в связи имени, но не запрещает записать новое значение в его свойство. Поэтому формулировка «const делает данные неизменяемыми» неверна. Для ограничения изменений нужна другая дисциплина: создание новых объектов, readonly на уровне TypeScript или соответствующие runtime-инструменты с учётом их ограничений.
const first = { progress: 0 };
const second = first;
second.progress = 3;
console.log(first.progress); // 3
// first = { progress: 4 }; // TypeErrortypeof и два вида отсутствия значения
Оператор typeof возвращает строковое название типа. Он удобен для первичной проверки ввода: typeof score === 'number'. Однако у него есть исторические особенности. Для null результатом будет 'object', хотя null — примитив. Для массива результат также 'object'; массивы проверяют через Array.isArray. Функция даёт 'function', что полезно при проверке возможности вызова.
undefined часто означает, что значение ещё не было предоставлено: переменная объявлена без инициализации, свойство отсутствует, функция ничего не вернула. null обычно выбирает сам разработчик как явный признак отсутствия объекта. Это соглашение, а не автоматическая семантика бизнеса. Важно договориться, какое отсутствие допускает контракт, и не заменять ноль или пустую строку отсутствием случайно.
let pending;
const selected = null;
console.log(typeof pending); // undefined
console.log(typeof selected); // object
console.log(Array.isArray([])); // trueСтроки и подстановка выражений
Строку можно записать в одинарных или двойных кавычках. Шаблонная строка в обратных кавычках позволяет вставлять выражения через ${...} и содержать переводы строк. Внутри подстановки выполняется обычное выражение JavaScript. Например, ${completed + 1} сначала складывает числа и только затем превращает результат в часть текста. Обычные кавычки такую подстановку не выполняют.
Шаблонные строки удобны для сообщений, но не являются автоматической защитой для HTML или SQL. Способ безопасной передачи строки зависит от принимающего API. Текст страницы передают через textContent, а значения запроса к БД — через параметры библиотеки. Сам синтаксис обратных кавычек не меняет смысл опасной операции со сформированной строкой.
const name = 'Анна';
const completed = 2;
console.log(`Привет, ${name}! Пройдено: ${completed}.`);
console.log('Привет, ${name}!'); // подстановки здесь нетОшибки начинающих и задача урока
Не объявляйте переменную заново в одной области видимости вместо обновления её значения: повторный let с тем же именем в одном блоке вызывает ошибку. Не присваивайте значение необъявленному имени. Не выбирайте имя data для всего подряд: userName, completedLessons и isLoading сообщают больше о назначении данных. Избегайте переиспользования одной переменной для несвязанных сущностей, даже если язык это позволяет.
В практике нужно построить приветствие и вернуть его. Входное имя уже передано в параметре, поэтому читать prompt или обращаться к странице не требуется. Проверьте имя кириллицей, короткую строку и имя с пробелом: подстановка не должна менять исходные символы. После решения объясните отдельно, какую связь создаёт параметр функции, какое новое значение создаёт шаблонная строка и почему return передаёт это значение проверяющей программе.