Объявление переменных и констант в ES6

Очень долго в JavaScript объявление переменных выполнялось с помощью ключевого слова var. В стандарте EcmaScript 2015 (который чаще называют ES6) к нему добавилось еще 2 ключевых слова: let - для объявления переменных с ограниченной областью видимости и const - для объявления констант, т.е. переменных с неизменяемым значением.

Если вы объявляете переменную с помощью let в начале скрипта, то большого отличия от var вы не заметите. Но ситуация меняется, когда объявленная таким образом переменная  появляется в цикле или в условной конструкции типа if...else внутри фигурных скобок. Даже просто при использовании фигурных скобок область видимости переменной, объявленной с помощью let, ограничивается исключительно областью этих скобок, т.е. блоком кода.

В примере ниже мы используем 2 разных объявления переменной a. До и после скобок она имеет значение, присвоенное ей с помощью ключевого слова var, а внутри скобок  - значение, присвоенное с помощью ключевого слова let.

То есть переменная a, заданная внутри скобок с помощью ключевого слова let, не видна за пределами этих скобок. Таким образом раньше работали переменные, объявленные внутри функций, т.е. с локальной областью видимости.

Сравним с аналогичным скриптом в формате ES5:

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

Следует еще отметить, что разница между var и let состоит в том, что с var переменную можно объявить в любом месте - ее использование будет корректным, т.к. при загрузке скрипта интерпретатор находит все переменные, объявленные с помощью var и запоминает их. Если вы попытаетесь вывести значение переменной, объявленной с помощью var ДО ее объявления, то увидите undefined. С let такой номер не проходит. Сначала нужно объявить переменную, и только после этого - использовать ее, иначе вы получите очередное сообщение об ошибке.

Кстати, переменные с let нельзя объявлять дважды. Такой код приведет к ошибке типа redeclaration of let m:

Также нельзя объявить сначала переменную с помощью var, а затем пытаться объявить такую же с помощью let.

Примечание: если вы только начинаете работать с JavaScript, для тестирования кода вам понадобится консоль, которая открывается в любом браузере при нажатии на кнопку F12, а затем ESC или выбираете вкладку Console.

Использование let в цикле

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

В примере ниже видно, что значение переменной i = 6 после цикла, а j не существует вне скобок.

Константы в JavaScript

Если необходимо определить некую переменную, которая на протяжении выполнения сценария не должна менять свое значение, удобно сделать это с помощью ключевого слова const.

Например, необходимо использовать некий цвет, который не будет меняться:

Если необходимо константе присвоить какой-либо объект, то поведение несколько поменяется - вы не сможете изменить саму константу, а свойства внутри нее - вполне:

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