В чём разница между var, let и const в JavaScript
Mar 19, 2019 · 7 min read
Инициализация и объявление переменной
Объявление переменной вводит новый идентификатор.
Инициализация — это присваивание значения переменной.
Это подводит нас к понятию «область видимости».
Область видимости
Область видимости определяет, где в коде программы будут доступны переменные и функции. В JavaScript есть два типа области видимости — глобальная и локальная ( global scope и function scope). Согласно официальной спецификации:
Если переменная создаётся внутри объявления функции, то её область видимости определяется как локальная и ограничивается этой функцией.
Если JavaScript это единственный язык программирования, которым вы владеете, то вы не заметите ничего странного. Но если вы перешли с другого языка, вы, вероятно, немного запутались в том, что здесь происходит.
Hoisting
Давайте посмотрим, как действует hoisting, на предыдущем примере:
var VS let VS const
Следующее отличие связано с поднятием переменной. Ранее мы определили, что интерпретатор в JavaScript присваивает переменным значение undefined по умолчанию во время фазы «Создания». Вы даже видели это в действии, логируя переменную до её объявления (и получили undefined ).
let VS const
Var, let и const в JavaScript
Aug 13, 2019 · 4 min read
Пока я разбирался что к чему в основах JavaScript, я наткнулся на три способа объявления переменных, а именно var, let и const. В данной статье я попытаюсь обобщить различия этих операторов присваивания.
Чтобы по-настоящему понять разницу между var, let и const, нам необходимо разобраться в следующих понятиях:
Объявление переменной
Объявление переменной — это процесс введения нового определения в программу или, если быть точнее, в область видимости. В JavaScript переменные изначально приобретают значение undefined, когда мы объявляем ключевое слово var (это автоматически выполняется интерпретатором).
Инициализация переменной
Инициализация перем е нной — это процесс присваивания значения переменной. Поэтому, когда мы определяем связь между ключевым словом var, интерпретатор присваивает значение undefined.
Область видимости
Область видимости переменной определяет контекст, в котором доступны переменные и функции, на которые можно ссылаться в программе. Область видимости определяет видимость и время жизни переменных и параметров. Если переменной нет в определенной области видимости, то она недоступна для использования. Области видимости также могут располагаться в иерархическом порядке, чтобы дочерние имели доступ к родительским, а не наоборот.
Существует 2 типа области видимости:
Функциональная область видимости
Переменные, объявленные внутри функции, входят в область видимости этой функции, а также в область видимости вложенных в нее функций, независимо от блоков.
Блочная область видимости
Переменные, объявленные внутри блока, входят в область видимости только этого блока, а также вложенных в него блоков, но не за пределами блока, даже если это все одна функция. В блоки входят if. else и циклы.
Поднятие
В веб-документации MDN говорится:
«Поднятие — это термин, использование которого вы не найдете ни в одной нормативной документации JavaScript до спецификации языка ES2015. Предполагалось, что поднятие — это обобщенный способ видения того, как работает контекст исполнения (особенно создание и исполнение стадий) в JavaScript. Однако это понятие по началу может сбивать с толку.
Концептуально, например, строгое определение поднятия предполагает, что объявление переменной и функции физически располагается в начале кода, но это не так. Объявления переменной и функции помещаются в память на стадии компиляции, но остаются там, где вы их набрали в своем коде».
Как можно упростить оценку интерпретатора JS для кода выше:
Оператор var объявляет переменную, опционально присваивая ей значение. Любая переменная, объявленная оператором var, имеет функциональную область видимости и идентифицирует объявленные переменные с помощью ключевого слова var. Такие переменные поднятые, а их первоначальное значение — undefined.
Оператор let объявляет локальную переменную. Любая переменная, объявленная с помощью let, имеет блочную область видимости. Значения подняты и не инициализированы.
Связи let создаются сверху области видимости конкретного блока, содержащего определение, часто называемого поднятием. В отличие от переменных, объявленных с помощью var, которые начинаются со значения undefined, переменные let не инициализируются, пока им не присвоится значение. Обращение к переменной до инициализации вызовет Reference Error (ошибка использования несуществующего названия).
const
Оператор const объявляет переменную, почти как let, но у него появляется еще одно свойство. Он не может быть переопределен, то есть после инициализации связей const не может присвоить никакое другое значение.
Следовательно, const должен быть всегда инициализирован при объявлении, иначе возникает ошибка.
Стоит отметить, что когда const связан с объектом, сам объект нельзя изменить, и const будет указывать на тот же самый объект. Однако изменения внутри объекта допустимы.
Один последний факт:
Переменные, объявленные внутри функции без ключевого слова, станут глобальными переменными. Взглянем на это в следующем примере:
Чтобы понять что происходит, нам нужно вернуться назад к понятию поднятия. Обычно при инициализации переменной в нашем коде интерпретатор ищет «поднятые переменные» и затем присваивает или переназначает значение переменной. Однако, когда интерпретатор не может найти переменную внутри функции, он ищет ее среди переменных родительской функции, пока не дойдет до глобальной области видимости.
В нашем случае интерпретатор не найдет ‘isGloballyAvailable’ даже в глобальной области видимости, поэтому он автоматически туда ее добавит.
Это невероятно опасный процесс, которого лучше не допускать. Поэтому имейте в виду, что объявлять переменные без ключевых слов var, let и const нельзя.
Так, когда использовать var, let или const?
ES2015(ES6) представил let и const. Зачем JavaScript разработчикам их вводить? Может, чтобы исправить проблемы, возникающие с var, или для улучшения читабельность кода?
Одна главная проблема с var связана с тем, что он позволяет переназначать переменные в коде, из-за чего не выбрасываются ошибки. Это приводит к различным побочным эффектам в коде.
Распространенное мнение, которое сходится с моим:
Всегда отдавайте предпочтение const, если значение, присвоенное переменной, не изменится. Это подскажет будущим разработчикам, что у переменной неизменное значение.
А let используйте, если значение в будущем изменится.
Где бы был полезен var, я не представляю.
CONST в JS делает свою работу правильно!
FullStack CTO
FullStack CTO
Разбираемся в сути и предназначении
На собеседовании фронтедеров частенько можно услышать вопрос, в чем разница между var, let и const. А далее вопрос могут раскрутить до вопроса: а покажите, как сделать неизменяемый объект. Вопрос вполне хороший и имеет право на жизнь.
Но в сети так же периодически можно услышать фразы и увидеть статьи о том, что const в JS не работает и что не нужно его использовать. И приводится пример, наподобие этого:
Ну вообще-то да, поле объекта меняется. И должно меняться. Не меняется ссылка на значение. В данном случае ссылка на объект. Поля объекта меняются и должны меняться иначе это было бы странно. Это не бага JS! Все работает правильно.
Константа — способ адресации данных, изменение которых не предполагается или запрещается.
Для чего используется слово const в JS?
Usecase 1# Для описания констант.
Значения констант должны быть примитивы. Если вы хотите зафиксировать некоторые величины, которые не должны меняться на протяжении программы — вы описываете их как константы.
Такими величинами могут быть числа и строки. Т.е. примитивы. Есть исключения, но о них чуть позже. В JS уже есть встроенные константы. Например число Пи(Math.PI). Хотите записать тау (2PI)? Запишите:
Эти значения будут константными и неизменными. Все работает как и положено. Хотите сохранить строковые величины? Пожалуйста. Нужно записать флаг, например завести константы DEBUG? Да пожалуйста. Все ваши константы будут работать как надо:
В качестве константы нужно и правильно использовать примитивы. В некоторых языках программирования на уровне компилятора/интерпретатора не разрешено создавать константы из чего-то, кроме примитивов. Не должно быть констант объектов. Константы должны быть простыми типами — примитивами. Но есть исключения.
Исключения для const
Usecase #2. Для описания неизменяемых объектов Function
Вопрос на собеседовании: как отработает этот код?
В JS можно переопределять уже созданные функции. Это значит что вашу ранее объявленную функцию можно не просто переопределить, ее вовсе можно “прибить”. И сделать это можно даже чисто случайно. Например правите вы такой вот файл и…
Наверняка кто-то из вас сталкивался с чем-то подобным. Этот пример утрирован, но он реален и имеет место быть в практике.
Кстати, почему так произошло — отдельная тема, связанная с всплытием переменных(hoisting). Про это поговорим в ближайшее время.
Что можно было сделать? Как вариант — использовать функциональные выражения:
Писать стрелочную функцию или нет — уже дело выбора и предназначения (нужно ли будет менять контекст или нужна привязка).
В данном случае foo — это объект. И у него есть даже поля, например вы можете получить имя функции:
Попробуйте изменить эту функцию или этот объект. Не получается?
Как создать константный объект?
Продолжаем наше импровизированное собеседование.
Если уж вам все-таки ну очень приспичило создать объект-константу, то тут мы все так же используем слово const но(!) добавляем такую штуку как Object.freeze().
Метод Object.freeze() замораживает объект. Это значит, что он предотвращает добавление новых свойств к объекту, удаление старых свойств из объекта и изменение существующих свойств или значения их атрибутов перечисляемости, настраиваемости и записываемости. В сущности, объект становится неизменным. Метод возвращает замороженный объект.
Видите, для заморозки объектов есть отдельный специальный механизм, который и делает наш любимый JS таким гибким. И если вы хотите создать констату-объект, то вы пишите следующий код:
Все прекрасно работает. Но создавать неизменяемый объект это прерогатива других механизмов, а не ключевого слова const.
Нужно запомнить, что слово
CONST — только для неизменяемой ссылки на ячейку памяти со значением.
И это правильная нормальная работа. И я не понимаю почему у некоторых бомбит и они пишут статьи на тему неработающего const.
И линтеры не должны вам ничего говорить и указывать, если вы указали константную ссылку на объект. Ссылка на объект и сам объект — это две разные сущности. Изменяемость объекта, как и передача его по ссылке — это вообще отдельная тема. А const делает свою работу прекрасно и правильно! И здорово что у нас есть такая гибкость, в отличие от других языков, и мы можем отдельно управлять иммутабельностью объектов и ссылок на объекты.
Если же продолжить собеседование, то можно уточнить про то, весь ли объект будет иммутабельным. А точнее будут ли дочерние элементы неизменяемыми?
Да, Object.freeze() не делает глубокой заморозки. Но это все решаемо. Либо пишите все на ванильном JS либо используете специализированные библиотеки.
Так как это импровизированное собеседование, то давайте решим задачу на чистом JS:
Переменные: let и const
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
У объявлений переменной через let есть три основных отличия от var :
Область видимости переменной let – блок <. >.
Например, переменная через var :
То же самое с let будет работать по-другому:
Заметим, что если объявление let apples в первой строке (*) удалить, то в последнем alert будет ошибка: переменная не определена:
Это потому что переменная let всегда видна именно в том блоке, где объявлена, и не более.
Переменная let видна только после объявления.
Как мы помним, переменные var существуют и до объявления. Они равны undefined :
С переменными let всё проще. До объявления их вообще нет.
Такой доступ приведёт к ошибке:
Заметим также, что переменные let нельзя повторно объявлять. То есть, такой код выведет ошибку:
При использовании в цикле, для каждой итерации создаётся своя переменная.
Переменная var – одна на все итерации цикла и видна даже после цикла:
С переменной let – всё по-другому.
Это позволяет легко решить классическую проблему с замыканиями, описанную в задаче Армия функций.
А выше объявление let i создаёт для каждого повторения блока в цикле свою переменную, которую функция и получает из замыкания в последних строках.
const
Объявление const задаёт константу, то есть переменную, которую нельзя менять:
Заметим, что если в константу присвоен объект, то от изменения защищена сама константа, но не свойства внутри неё:
То же самое верно, если константе присвоен массив или другое объектное значение.
Большинство переменных – константы в другом смысле: они не меняются после присвоения. Но при разных запусках функции это значение может быть разным. Для таких переменных можно использовать const и обычные строчные буквы в имени.
Итого
Ключевое слово const
В редакции ES2015 были добавлены два новых важных ключевых слова JavaScript — let и const.
Переменные, декларированные при помощи ключевого слова const, ведут себя так же как переменные, декларированные при помощи ключевого слова let, за исключением того, что им нельзя переприсваивать значения:
Область видимости внутри блока
Относительно области видимости внутри блока поведение переменных, декларированных при помощи ключевого слова const, похоже на поведение переменных, декларированных при помощи ключевого слова let.
В следующем примере переменная x, декларированная внутри блока, не то же самое, что переменная x, декларированная вне этого блока:
Подробнее об области видимости внутри блока см. главу Ключевое слово let.
Присваивание во время декларации
Значения для JavaScript переменных с ключевым словом const должны присваиваться во время декларации:
Не настоящие константы
Ключевое слово const может вводить в заблуждение.
В действительности оно определяет не константное значение, а константную ссылку на значение.
В связи с этим мы не можем изменять примитивные константные значения, но можем изменять свойства константных объектов.
Примитивные значения
Если мы присваиваем константе примитивное значение, то впоследствии мы не можем его изменить:
Константные объекты можно изменять
Свойства константных объектов можно изменять:
Но вы НЕ МОЖЕТЕ присвоить константному объекту новое значение:
Константные массивы можно изменять
Элементы константного массива можно изменять:
Но вы НЕ МОЖЕТЕ переприсвоить константный массив:
Передекларирование
Передекларировать переменную JavaScript при помощи ключевого слова var можно в любом месте программы:
Нельзя передекларировать или переприсвоить существующую переменную, декларированную при помощи ключевого слова var или let, с ключевым словом const в той же области видимости или в том же блоке:
Нельзя передекларировать или переприсвоить существующую переменную, декларированную при помощи ключевого слова const, в той же области видимости или в том же блоке:
Передекларировать переменную с ключевым словом const в другой области видимости или в другом блоке можно:
Поднятие
Переменные, декларированные при помощи ключевого слова var, «поднимаются» в верх JavaScript кода (если вы не знаете, что такое «поднятие» в JavaScript, то см. главу Поднятие переменных в Javascript).
Таким образом, мы можем использовать такие переменные до того, как они будут декларированы:
Переменные, декларированные при помощи ключевого слова const, не «поднимаются» в верх JavaScript кода.
Такие переменные нельзя использовать до тех пор, пока они не будут декларированы:
