let и const

Представьте кладовку с коробками. На каждой коробке есть наклейка с надписью, а внутри лежит одна вещь. Чтобы достать вещь, не нужно помнить, на какой полке стоит коробка: достаточно найти надпись. Программе нужно то же самое — место, куда можно положить значение и откуда его можно взять по имени.

Зачем это нужно? Программа часто использует одно значение в нескольких местах. Если каждый раз писать его числом, это число повторяется по всему коду:

console.log(250 * 3);  // 750
console.log(250 * 3 + 100);  // 850

Здесь цена 250 записана дважды. Когда цена изменится, придётся исправить каждую строку, и одну из них вы рискуете пропустить. В большой программе таких строк бывают десятки. Значению нужно имя, по которому его можно прочитать в любом месте программы.

Переменные через let

Переменная — имя, под которым программа хранит значение. Это и есть коробка с наклейкой: имя — надпись, значение — то, что лежит внутри. Слово let объявляет переменную, а знак = сразу записывает в неё начальное значение:

let price = 250;
console.log(price * 3);  // 750
price = 300;
console.log(price * 3);  // 900

Давайте разберём пример по строкам:

1. let price = 250; создаёт переменную price и кладёт в неё 250.
2. console.log(price * 3); читает price, умножает на 3 и печатает 750.
3. price = 300; кладёт в price новое значение 300.
4. Та же запись console.log(price * 3); теперь печатает 900.

Цена записана в одном месте. Если она изменится, все строки ниже прочитают новое значение.

Присваивание

Строка price = 300; — присваивание: знак = заменяет старое значение переменной новым. Слово let здесь второй раз не пишут, потому что переменная уже объявлена. Когда программа читает price, она получает значение, записанное последним.

Знак = в программе — не равенство из математики, а команда «запиши». Поэтому справа от = может стоять вычисление с той же переменной. Строка price = price + 50; выполняется в два шага:

1. Программа читает старое значение price и прибавляет к нему 50.
2. Результат записывается обратно в price.

Здесь аналогия с коробкой перестаёт работать. Настоящую вещь можно вынуть из коробки и отложить в сторону. При присваивании старое значение никуда не откладывается: оно исчезает, и вернуть его нельзя.

Чаще всего новичков путает ещё одна деталь. Переменная хранит готовое значение, а не формулу, по которой его посчитали. Если после let total = price * count; изменить price, в total останется старый результат. Нажимайте «Следующий шаг» и следите, какое число лежит в total после каждой строки.

Значение total изменилось только на тех строках, где программа снова выполнила присваивание в total.

Как называть переменные

В именах пишут латинские буквы и цифры, причём цифра не может стоять первой. Составное имя пишут слитно, начиная каждое следующее слово с заглавной буквы: totalPrice, itemCount. Хорошее имя говорит, что лежит в коробке: price понятнее, чем p.

Константы через const

Слово const объявляет константу — переменную, которой значение присваивают один раз, при объявлении. Это коробка, которую заклеили скотчем сразу после того, как положили в неё вещь. Прочитать константу можно сколько угодно раз, а записать в неё новое значение нельзя.

const count = 3;
let total = 250 * count;
total = total + 100;
console.log(total);  // 850

Разберём пример по строкам:

1. const count = 3; — количество не меняется, поэтому это константа.
2. let total = 250 * count; кладёт в total число 750.
3. total = total + 100; читает 750, прибавляет 100 и записывает 850 обратно.
4. console.log(total); печатает 850.

Объявить константу без значения тоже нельзя: из-за строки const x; программа не запускается вовсе и сообщает об ошибке SyntaxError: Missing initializer in const declaration.

Что выбрать: const или let

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

В старом коде встречается ещё var — прежний способ объявлять переменные.

Этот вопрос часто задают на собеседовании: «Чем let отличается от const?» Ответ из этого урока состоит из двух частей:

• переменной let можно присвоить новое значение, а константе const — нельзя;
• константу объявляют сразу со значением, а let можно объявить и без него.

Частая ошибка

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

const count = 1;
console.log("start");
count = count + 1;  // ✗
console.log(count);

TypeError: Assignment to constant variable.

Программа успевает вывести start. Как и ReferenceError, эта ошибка возникает только тогда, когда выполняется её строка, и останавливает программу на ней. Если значение меняется, объявите переменную через let: let count = 1;.

Главное

• let объявляет переменную, которой можно присвоить новое значение, а const — константу, значение которой задают один раз.
• Присваивание = заменяет старое значение новым, а x = x + 1 сначала читает старое значение.
• Переменная хранит готовое значение, а не формулу: после изменения price значение total само не пересчитается.
• По умолчанию пишут const, а let — когда значение будет меняться.