Переменные в JS: let, const и var простыми примерами

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

Минимальный пример:

const name = "Dinar";
let score = 0;

score = score + 1;

console.log(name);
console.log(score);

name не переназначается, поэтому подходит const. score меняется, поэтому нужен let

Содержание

const
let
var
Область видимости
Как называть переменные
Практический пример
Переменная и значение из input
Частые ошибки
Менять const
Создавать переменную без const или let
Называть переменную зарезервированным словом
Мини-задание
Что почитать дальше по JavaScript

const

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

const city = "Kazan";

city = "Moscow"; // ошибка

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

const tasks = [];

tasks.push("Изучить переменные");

console.log(tasks);

Важно: const защищает имя переменной от нового присваивания, но не делает объект или массив полностью неизменяемым

let

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

let counter = 0;

counter++;
counter++;

console.log(counter); // 2

Еще пример:

let message = "Ожидание";

if (counter > 0) {
  message = "Есть клики";
}

Если вы заранее знаете, что переменная будет получать новое значение, используйте let

var

var был основным способом объявлять переменные в старом JavaScript. Сейчас он может запутать новичка, потому что у него другая область видимости и поведение при всплытии

Пример, где let понятнее:

if (true) {
  let status = "ok";
  console.log(status);
}

// console.log(status); // ошибка: status виден только внутри блока

Такое поведение удобнее: переменная живет там, где она нужна

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

Переменная, созданная внутри блока {}, обычно доступна только внутри этого блока:

{
  const localValue = 10;
  console.log(localValue);
}

// console.log(localValue); // ошибка

Это помогает не засорять весь файл лишними именами

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

Хорошее имя объясняет смысл:

const userName = "Anna";
const totalPrice = 1500;
const isOpen = true;

Плохие имена:

const a = "Anna";
const x = 1500;
const data = true;

Иногда короткие имена нормальны в маленьком цикле, но для учебных материалов лучше писать ясно

Практический пример

<button id="button">Нажать</button>
<p id="counter">0</p>

<script>
  const button = document.querySelector("#button");
  const counterText = document.querySelector("#counter");
  let count = 0;

  button.addEventListener("click", () => {
    count++;
    counterText.textContent = count;
  });
</script>

Здесь button и counterText не переназначаются, поэтому это const. А count растет после каждого клика, поэтому это let

Переменная и значение из input

В веб-страницах переменные часто берут данные из поля:

<input id="name" placeholder="Введите имя">
<button id="save">Сохранить</button>
<p id="result"></p>

<script>
  const input = document.querySelector("#name");
  const save = document.querySelector("#save");
  const result = document.querySelector("#result");

  save.addEventListener("click", () => {
    const userName = input.value.trim();
    result.textContent = `Привет, ${userName}`;
  });
</script>

Здесь userName создается внутри обработчика клика. Это нормально: переменная нужна только в момент обработки ввода. Не обязательно объявлять все переменные в начале файла

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

Менять const

const age = 20;
age = 21; // нельзя

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

Создавать переменную без const или let

name = "Anna";

Так делать не нужно: можно случайно создать глобальную переменную и получить трудноуловимые ошибки

Называть переменную зарезервированным словом

Нельзя назвать переменную let, class, return и другими ключевыми словами языка

Мини-задание

Создайте переменные userName, age, isStudent и clicks. Для первых трех используйте const, для clicks — let. Увеличьте clicks на единицу и выведите все значения в Console