LearnJS

let, const и var

В прошлом уроке мы разобрали, что переменная - это место, куда можно записать значение и потом использовать его в коде.

В JavaScript переменные можно объявлять тремя способами: let, const и var. На первых уроках это может сбивать с толку: кажется, что все они делают одно и то же. На самом деле разница есть, и ее важно понимать.

let age = 25;
const name = 'Алексей';
var city = 'Москва';

Все три строки создают переменные, но вести себя они будут по-разному.

Зачем нужны три слова

Изначально в JavaScript для переменных использовали var. Позже в языке появились более удобные и понятные варианты - let и const.

Сейчас в новом коде чаще всего используют именно let и const, а var встречается в старых проектах, статьях и примерах.

Если коротко:

  • let - переменная, значение которой можно изменить;
  • const - переменная, которой нельзя присвоить новое значение;
  • var - старый способ объявления переменных.

Теперь разберем каждый вариант отдельно.

let

let используют, когда значение переменной может измениться.

let score = 0;

score = 10;
score = 20;

console.log(score);

В консоли будет:

20

Сначала в переменной score было число 0, потом мы записали 10, а затем 20. Последнее значение заменило предыдущие.

Такой вариант подходит для данных, которые меняются во время работы программы:

  • счетчик;
  • результат вычислений;
  • значение из формы;
  • текст, который пользователь может изменить;
  • временная переменная внутри цикла или функции.

Например:

let userName = 'Гость';

userName = 'Ирина';

console.log(userName);

Здесь имя сначала было ‘Гость’, а потом изменилось на ‘Ирина’.

const

const используют, когда переменной не нужно присваивать новое значение.

const language = 'JavaScript';

console.log(language);

Если попробовать изменить значение, будет ошибка:

const language = 'JavaScript';

language = 'Python';

В консоли появится сообщение примерно такого вида:

TypeError: Assignment to constant variable.

Это значит, что мы пытаемся изменить переменную, объявленную через const.

На первый взгляд может показаться, что const нужен только для настоящих констант, вроде числа 3.14. Но в JavaScript его используют гораздо чаще. Если значение не планируется менять, лучше объявить переменную через const.

const birthYear = 1995;
const courseName = 'JavaScript для начинающих';
const maxUsers = 100;

Так код становится понятнее: мы сразу видим, что этим переменным не будут присваивать новое значение.

Важно: const запрещает именно новое присваивание переменной. С объектами и массивами есть отдельные нюансы, но их лучше разобрать позже, когда дойдем до этих тем.

var

var - старый способ объявления переменных. Раньше другого варианта в JavaScript просто не было.

var message = 'Привет';

console.log(message);

Такой код работает. Но в новом коде обычно лучше использовать let или const.

У var есть особенности, которые часто мешают новичкам. Например, одну и ту же переменную можно объявить повторно:

var message = 'Привет';
var message = 'Здравствуйте';

console.log(message);

В консоли будет:

Здравствуйте

JavaScript не покажет ошибку, хотя мы объявили переменную с одинаковым именем два раза. В большом коде из-за этого можно случайно перезаписать значение и долго искать причину.

С let так уже не получится:

let message = 'Привет';
let message = 'Здравствуйте';

JavaScript покажет ошибку, потому что переменная message уже была объявлена. Это полезно: ошибка появляется сразу, а не прячется до сложного момента.

Область видимости

У let и const есть блочная область видимости. Если переменная создана внутри блока кода, снаружи она недоступна.

if (true) {
  let message = 'Привет';

  console.log(message);
}

Внутри блока переменная работает. А вот снаружи ее уже нет:

if (true) {
  let message = 'Привет';
}

console.log(message);

В консоли будет ошибка, потому что message существует только внутри фигурных скобок.

С const правило такое же:

if (true) {
  const course = 'JavaScript';

  console.log(course);
}

var в такой ситуации ведет себя иначе. Он не ограничивается обычным блоком:

if (true) {
  var message = 'Привет';
}

console.log(message);

Такой код может сработать, хотя переменная была создана внутри блока. Именно поэтому var сложнее контролировать в большом коде.

На первых уроках достаточно запомнить простое правило: let и const ведут себя понятнее, поэтому в новом коде используем их.

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

Хорошая привычка для начала такая:

  • если значение не будет меняться - используем const;
  • если значение нужно менять - используем let;
  • var в новом коде не используем, но уметь узнавать его нужно.

Пример с const:

const siteName = 'LearnJS.ru';

console.log(siteName);

Название сайта не меняется во время работы программы, поэтому здесь подходит const.

Пример с let:

let counter = 0;

counter = counter + 1;
counter = counter + 1;

console.log(counter);

В консоли будет:

2

Счетчик меняется, поэтому здесь нужен let.

Частые ошибки

Первая ошибка - пытаться изменить переменную, созданную через const.

const age = 25;

age = 26;

Если значение должно меняться, используйте let:

let age = 25;

age = 26;

Вторая ошибка - объявлять одну и ту же переменную два раза через let или const.

let city = 'Москва';
let city = 'Санкт-Петербург';

Если переменная уже создана, нужно просто присвоить новое значение:

let city = 'Москва';

city = 'Санкт-Петербург';

Третья ошибка - думать, что const всегда означает “значение никогда не меняется вообще”. Для простых значений, таких как строки и числа, так и есть. Но с массивами и объектами будут нюансы. Пока просто запомним: const запрещает присвоить переменной новое значение.

Четвертая ошибка - использовать var по привычке из старых примеров. Если вы пишете новый код, лучше выбирать между let и const.

Что дальше

Теперь мы знаем, чем отличаются let, const и var. В большинстве новых примеров курса будем использовать const, если значение не меняется, и let, если его нужно изменить.

Дальше разберем типы данных в JavaScript: строки, числа, логические значения, null, undefined и другие базовые варианты данных.