ES6 Переменные

До появления стандарта ECMAScript 6 (ES6) единственным способом объявления переменных было использование ключевого слова var. В случае отсутствия явного объявления переменной она автоматически становилась частью глобального объекта (window в браузере). Когда программа работала в строгом режиме (use strict), попытка обращения к незадекларированной переменной приводила к ошибке выполнения программы (ReferenceError).

С выходом ES6 разработчики получили возможность выбирать между тремя способами объявления переменных: var, let и const.

Ключевое слово var

Объявление переменных через var работает следующим образом:

Область видимости переменных, созданных с использованием var, ограничена функцией, где эта переменная была объявлена (функциональная область видимости):

  • Если переменная объявлена за пределами какой-либо функции, она становится доступной во всей программе (глобальная область видимости).
  • Внутри функций переменные принадлежат именно данной функции, даже если блок объявлений находится внутри локальных конструкций вроде циклов или условных операторов.

При этом важно отметить, что объявление переменной с помощью var происходит на уровне функции целиком. То есть, переменная, определённая внутри какого-то блока кода (например, условия или цикла), будет видна вне данного блока.

Пример

Работа var:


// Глобальное пространство имен
var x = 5.6;

// Локальное пространство имен внутри функции
function myFunction() {
  var y = 10;
  console.log(y); // выводит '10'
}

myFunction(); // вызываем функцию
console.log(x); // выводит '5.6' (доступна извне)
console.log(y); // возникает ошибка ReferenceError, потому что y не является глобальной переменной

Ключевое слово let

Переменные, созданные с помощью let, обладают блочной областью видимости. Это значит, что такие переменные видны исключительно внутри своего блока ({}) и остаются невидимыми снаружи этого блока.

Это помогает избежать неожиданных побочных эффектов, связанных с изменением значений переменных в разных частях программы.

Например, цикл for создаёт новую переменную-счётчик каждую итерацию цикла, и после завершения цикла такая переменная больше недоступна.

Пример

Работа let:


// Объявляем переменную на верхнем уровне
let x = 5.6;

// Цикл, создающий временную переменную i, доступную только внутри цикла
for (let i = 0; i < 5; i++) {
  console.log(i); // выводим значения от 0 до 4
}

console.log(i); // здесь возникнет ошибка ReferenceError, поскольку i существует только внутри блока цикла

Ключевое слово const

Ключевое слово const предназначено для объявления неизменяемых (константных) переменных. Как и let, оно также обладает блочной областью видимости. Однако, если вы попытаетесь изменить значение такой переменной позже, JavaScript выдаст ошибку (TypeError).

Обратите внимание, что неизменность относится непосредственно к самой ссылке на значение, а не к содержимому переменной. Например, если речь идёт про объекты или массивы, хотя саму ссылку поменять нельзя, изменения элементов объектов/массивов допустимы. То есть const не определяет постоянное значение, а определяет постоянную ссылку на значение. Это означает, что:

  • Вы не можете переопределить значение константы.
  • Вы не можете переопределить массив или объект, объявленные как константы.
  • Но вы можете изменять элементы массива или свойства объекта.

Пример

Работа const:


// Создаём константу
const x = 5.6;

// Попытка изменить её приведёт к ошибке
x = 10; // TypeError: cannot assign to read-only property 'x'

// Массивы и объекты тоже могут быть константами
const arr = [1, 2, 3]; 
arr.push(4); // теперь arr равен [1, 2, 3, 4], добавляя элемент разрешено!

const obj = { name: "Alice" };
obj.age = 30; // обновили свойство объекта, ошибок нет

Заключение

Поддерживая разные способы объявления переменных (var, let и const), стандарт ES6 предоставил разработчикам гибкость и точность управления переменными. Использование ключевых слов let и const улучшает структуру кода, минимизирует риск случайных изменений переменных и делает программу более безопасной и понятной для поддержки и чтения другим программистам. Рекомендуется применять let и const там, где это возможно, отдавая предпочтение постоянным данным (const), чтобы минимизировать возможные ошибки при разработке больших приложений.