Использование const и var в JavaScript: когда и почему

Быстрый ответ

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

const СКОРОСТЬ_СВЕТА = 299792458; // Усэйн Болт, удержи мое пиво!
const настройки = { тема: 'темная' }; // Темная сторона одобряет!
настройки.тема = 'светлая'; // Джедай: "Сила пробудилась! Ты это чувствуешь?"
// СКОРОСТЬ_СВЕТА = 300000000; // TypeError: Эйнштейн: "Я же говорил!"

Используйте let там, где требуется переназначение переменной. В остальных случаях используйте const.

Когда стоит использовать const

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

• При определении глобальных констант (например, ЧИСЛОПИ, СКОРОСТЬСВЕТА)
• Для обозначения неизменных импортов в модульных системах
• В качестве демонстрации взглядов на концепцию неизменности данных в программировании

Область видимости и инициализация const

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

if (true) {
  const сообщение = 'Привет! Это Const!';
  console.log(сообщение); // Привет! Это Const!
}
console.log(сообщение); // ReferenceError: Const говорит: "Ты меня не видишь!"

Объявление const требует одновременного присвоения значения, иначе это вызовет ошибку.

const приветствие; // SyntaxError: Const требует: "Пожалуйста, дай мне значение!"

Особенности const, которые важно знать

Как только const получает значение, оно становится неизменяемым, обеспечивая этим защиту вашего кода.

• Функции объявленные с помощью const, защищены от нежелательного переназначения, избегая таким образом возникновения ошибок:

const вычислитьПлощадь = function(radius) { return Math.PI * radius * radius; };
// ...
// вычислитьПлощадь = другаяФункция; // TypeError: Const заявляет: "Не трогай меня!"

• Группируйте связанные константы для повышения читабельности кода:

const РолиПользователей = {
  АДМИН: 'admin',
  ГОСТЬ: 'guest',
  ПОЛЬЗОВАТЕЛЬ: 'user'
};

Производительность при использовании const

Движки JavaScript специально оптимизированы для упрощения кода, к примеру, удаляя "мёртвый" код при использовании const. Преимущества в производительности могут быть незначительны, однако const действительно способствует улучшению эффективности кода.

Работа с изменяемыми объектами

const не делает значения неизменными, это лишь запрещает их переназначение. Объекты и массивы, обозначенные через const, всё ещё могут быть изменены:

const книга = { название: '1984', автор: 'Джордж Оруэлл' };
книга.название = 'Скотный двор'; // Оруэлл: "Наблюдаю за тобой!"

Визуализация

Воспринимайте const и let как основу и конструкцию здания.

• const — это фундамент здания, надёжный и неизменный.

Фундамент заложен из 🧱:
**const** план = { стены: 4, двери: 2 };

• let — это элементы конструкции, которые позволяют вносить изменения и адаптироваться к новым требованиям.

Модернизация конструкции 🧩:
**let** дизайн = { окна: 4 };
дизайн = { окна: 5, балконы: 1 }; // Архитектор: "Исправим!"

Полезные материалы

1. const – JavaScript | MDN
2. JavaScript ES6+: var, let, или const? | от Eric Elliott | JavaScript Scene | Medium
3. Понимание поднятия (Hoisting) в JavaScript | DigitalOcean
4. ES2015 const и неизменяемость · Mathias Bynens
5. Руководство по стилю JavaScript от Google
6. Руководство по стилю JavaScript от Airbnb() { | Airbnb JavaScript Style Guide