Переменные: let и const

В прошлой главе программа вычисляла 2 + 3 и тут же забывала результат. Настоящим программам нужно запоминать: имя пользователя, цену товара, счёт игры. Для этого существуют переменные – именованные «коробки», в которые кладут значение, чтобы обращаться к нему по имени.

Переменную создают словом let или const, дальше идёт имя, знак = и значение. Знак = здесь – не «равно» из математики, а оператор присваивания: возьми то, что справа, и сохрани под именем слева.

Целиком запись выглядит так: let price = 100;. Здесь let priceобъявление переменной, а 100 – её начальное значение. Создание переменной сразу с первым значением называют – термин будет постоянно встречаться дальше, так что стоит привыкнуть к нему уже сейчас.

Зачем программе память

Значения нужно где-то хранить между шагами программы.

let price = 100 ключевое слово присваивание имя начальное значение
memory.jsjs
let price = 100;console.log(price);  // 100// 200 – имя работает как само значениеconsole.log(price * 2);
Где написано имя переменной – движок подставляет её значение.

let: значение можно заменить

Переменная, созданная через let, – коробка с крышкой: значение можно достать и положить новое. Для замены знак = используется без let – переменная уже существует, мы лишь кладём в неё другое значение. После присваивания имя score связано уже с новым значением – получить прежнее через score больше нельзя.

score.jsjs
let score = 0;console.log(score);  // 0// заменяем значение: let уже не пишемscore = 10;console.log(score);  // 10

Важная особенность JavaScript: коробке всё равно, что в ней лежит. В одну и ту же переменную можно положить число, потом строку, потом что-нибудь ещё – язык не закрепляет за переменной тип содержимого. В некоторых других языках так нельзя: там коробка «для чисел» принимает только числа. В JavaScript тип живёт у значения, а не у коробки.

Свобода удобная, но с обратной стороной: раз язык не следит за содержимым, следить придётся вам. Хорошая привычка – не складывать в одну переменную то число, то строку без причины: читателю кода будет трудно угадать, что там сейчас.

JavaScript
// сейчас в коробке числоlet box = 42;// теперь строка – язык не возражаетbox = 'сорок два';box = 3.14;  // и снова число
Java
// коробка объявлена «для целых чисел»int box = 42;// ошибка компиляции: строку в int не положитьbox = "сорок два";// тоже ошибка: дробное в целую коробку не лезетbox = 3.14;
В Java тип закреплён за самой переменной: в «коробку для целых» не положить ни строку, ни дробное. В JavaScript тип живёт у значения.
Как выполняется x = x + 1 – по шагам
let x = 3;
Объявление: переменная x получает начальное значение 3.
x = x + 1;
console.log(x);
Переменные
x = 3

const: переменную нельзя переназначить

const создаёт переменную, которой нельзя присвоить другое значение. Для чисел и строк это выглядит как запечатанная коробка: после создания заменить содержимое нельзя. Попытка присвоить такой переменной новое значение вызовет ошибку выполнения TypeError: Assignment to constant variable. Звучит как ограничение, а на деле – защита: читая const, вы твёрдо знаете, что значение не подменится где-то ниже по коду.

const.jsjs
const pi = 3.14;// 3.14 – читать можно сколько угодноconsole.log(pi);// TypeError: Assignment to constant variablepi = 3.1415;
Чтение свободно, переназначение – ошибка.

Ещё одно отличие: const нужно сразу дать значение. Запись const pi; недопустима – раз переменную нельзя переназначить позднее, она должна быть инициализирована при объявлении.

const-init.jsjs
// SyntaxError: Missing initializer in const declarationconst empty;// правильно: значение сразу при объявленииconst limit = 10;
Объявление без значения – синтаксическая ошибка ещё до запуска.

По умолчанию выбирайте const. Если по смыслу программы переменная должна получать новые значения – например, это счётчик или текущий результат, – используйте let. В современном коде const обычно используется заметно чаще, чем let.

Константы в ВЕРХНЕМ_РЕГИСТРЕ

Отдельный обычай сложился для значений, которые известны до запуска программы и не меняются со временем: цвета интерфейса, адреса серверов, настройки, лимиты. Такие константы принято называть в ВЕРХНЕМ_РЕГИСТРЕ с подчёркиваниями между словами: MAX_ATTEMPTS, COLOR_ACCENT. Имя издалека сообщает: это справочное значение, «зашитое» в код.

uppercase.jsjs
// известно до запуска и одинаково всегда – ВЕРХНИЙ_РЕГИСТР:const MAX_ATTEMPTS = 3;const COLOR_ACCENT = '#2ec27e';const API_URL = 'https://api.example.com';// значение появляется во время работы – обычный camelCase:// например, пришло из поля вводаconst userName = 'Ира';// например, посчитана из корзиныconst totalPrice = 1_250;
Оба вида – const: разница не в языке, а в договорённости об именах.

Правило выбора регистра такое. ВЕРХНИЙ_РЕГИСТР – когда значение известно заранее и одинаково при каждом запуске: конфигурация, цвета, лимиты. Обычный camelCase – когда значение появляется во время работы программы: оно тоже не переназначается, но до запуска неизвестно.

Имена переменных

Имя выбираете вы – и это первое проектное решение в вашем коде.

Главное правило – от людей, а не от языка: имя должно говорить, что внутри. price лучше, чем p, а daysUntilDeadline лучше, чем d. Код читают в десятки раз чаще, чем пишут – через неделю вы скажете себе спасибо.

Составные имена в JavaScript пишут «верблюдом» – camelCase: первое слово с маленькой буквы, каждое следующее начинается с большой: userName, totalPrice, isReady.

Кроме этого, у самого языка есть несколько формальных ограничений на имя переменной:

Что язык разрешает в имени, а что – нет

  • Буквы, цифры, _ и $total_sum, price2
  • Начинаться с цифры нельзя2fast
  • Зарезервированные слова языка занять нельзяconst let = 5
  • Регистр важен: price и Price – разные переменные

// теперь вы знаете

  1. Переменная – имя, связанное со значением; объявление сразу с первым значением – инициализация
  2. let позволяет присваивать имени новые значения
  3. const запрещает переназначение и требует начального значения
  4. Правая часть присваивания вычисляется первой, затем результат записывается в имя
  5. Имя должно говорить, что внутри: допустимое – не значит хорошее

Проверьте себя

Что выведет этот код?

let score = 5;
console.log(score + score);

Что выведет последняя строка?

let x = 7;
x = x + 2;
console.log(x);

Этот код выполнится без ошибки?

const pi = 3.14;
pi = 3.1416;
переключают уроки · не работают при фокусе в полях ввода