что такое let в javascript

До редакции ES2015 в JavaScript не было области видимости внутри блока.

Начиная с редакции ES2015 переменные, декларированные при помощи ключевого слова let, приобретают область видимости внутри блока. В результате этого переменные, декларированные таким образом внутри блока , становятся недоступными за пределами этого блока.

Передекларирование переменных

Передекларирование переменной при помощи ключевого слова var может вызвать проблемы.

Так, если передекларировать переменную внутри блока, то она будет перекларирована и за его пределами:

Решить эту проблему можно, если передекларировать переменную при помощи ключевого слова let.

В этом случае передекларирование переменной внутри блока не будет передекларировать переменную за пределами этого блока:

Область видимости внутри цикла

Использование ключевого слова var в цикле:

Использование ключевого слова let в цикле:

В первом примере переменная, декларированная в цикле при помощи ключевого слова var, также передекрарирует переменную за пределами цикла.

Во втором примере переменная, декларированная в цикле с ключевым словом let, не передекрарирует переменную за пределами цикла, оставляя неизменным ее значение, так как использование ключевого слова let для декларирования переменной i в цикле делает переменную i видимой только внутри этого цикла.

Область видимости внутри функции

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

Глобальная область видимости

Поведение переменных, декларированных вне блока при помощи ключевых слов var и let, одинаковое. В обоих случаях у переменных будет глобальная область видимости.

Глобальные переменные в HTML

В JavaScript глобальная область видимости распространяется на все окружение JavaScript.

В HTML глобальная область видимости — это глобальный объект window.

Глобальные переменные, декларированные при помощи ключевого слова var, принадлежат глобальному объекту window:

Глобальные переменные, декларированные при помощи ключевого слова let, не принадлежат глобальному объекту window:

Передекларирование

Передекларировать переменную JavaScript при помощи ключевого слова var можно в любом месте программы:

Нельзя передекларировать переменную, которая была декларирована при помощи ключевого слова var, при помощи ключевого слова let в той же области видимости или в том же блоке:

Нельзя передекларировать переменную, которая была декларирована при помощи ключевого слова let, при помощи ключевого слова let в той же области видимости или в том же блоке:

Нельзя передекларировать переменную, которая была декларирована с ключевым словом let, при помощи ключевого слова var в той же области видимости или в том же блоке:

Передекларировать переменную при помощи ключевого слова let в другой области видимости или в другом блоке можно:

Поднятие

Переменные, декларированные при помощи ключевого слова var, «поднимаются» в верх JavaScript кода (если вы не знаете, что такое «поднятие» в JavaScript, то см. главу Поднятие переменных в Javascript).

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

Переменные, декларированные при помощи ключевого слова let, не «поднимаются» в верх JavaScript кода.

Использование переменной, декларированной при помощи ключевого слова let, до ее реальной декларации приведет к ошибке ReferenceError.

В этом случае такая переменная находится в, так называемой, «временной мертвой зоне» с начала блока и до ее декларации:

Источник

Переменные: let и const

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

У объявлений переменной через let есть три основных отличия от var :

Область видимости переменной let – блок <. >.

Например, переменная через var :

То же самое с let будет работать по-другому:

Заметим, что если объявление let apples в первой строке (*) удалить, то в последнем alert будет ошибка: переменная не определена:

Это потому что переменная let всегда видна именно в том блоке, где объявлена, и не более.

Переменная let видна только после объявления.

Как мы помним, переменные var существуют и до объявления. Они равны undefined :

С переменными let всё проще. До объявления их вообще нет.

Такой доступ приведёт к ошибке:

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

При использовании в цикле, для каждой итерации создаётся своя переменная.

Переменная var – одна на все итерации цикла и видна даже после цикла:

С переменной let – всё по-другому.

Это позволяет легко решить классическую проблему с замыканиями, описанную в задаче Армия функций.

А выше объявление let i создаёт для каждого повторения блока в цикле свою переменную, которую функция и получает из замыкания в последних строках.

const

Объявление const задаёт константу, то есть переменную, которую нельзя менять:

Заметим, что если в константу присвоен объект, то от изменения защищена сама константа, но не свойства внутри неё:

То же самое верно, если константе присвоен массив или другое объектное значение.

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

Итого

Источник

Что такое let в javascript

Объяснение, почему было выбрано название «let» можно найти здесь.

Правила области видимости

Чище код во вложенных функциях

let иногда делает код чище при использовании вложенных функций.

Эмуляция приватных членов

При взаимодействии с конструкторами можно использовать выражение let чтобы открыть доступ к одному или нескольким приватным членам через использование замыканий:

Временные мёртвые зоны и ошибки при использовании let

Повторное объявление той же переменной в том же блоке или функции приведёт к выбросу исключения SyntaxError.

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

Правила области видимости

Примеры

let vs var

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

let в циклах

Нестандартизированные расширения let

let блок

Поддержка let блоков была убрана в Gecko 44 баг 1023609.

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

Синтаксис

Описание

Пример

Правила области видимости

let выражения

Поддержка let выражений была убрана в Gecko 41 баг 1023609.

let выражение позволяет объявить переменные с областью видимости ограниченной одним выражением.

Синтаксис

Пример

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

Правила области видимости

В данном let выражении:

expr оборачивается в неявный блок.

Источник

Когда использовать var, let и const в Javascript [перевод статьи Tyler’а McGinnis]

Привет, Хабр! Представляю вашему вниманию перевод статьи «var vs let vs const in JavaScript» автора Tyler McGinnis.

В этой статье вы узнаете 2 новых способа для создания переменных в Javascript (ES6), let и const. На протяжении этой статьи мы рассмотрим разницу между var, let и const, а также смежные темы такие как: “область видимости функции против блочной области видимости“, “поднятие” переменных и иммутабельность.

Если вы предпочитаете видео, посмотрите это (оригинал на английском):

ES2015 (или ES6) представил нам 2 новых способа для создания переменных, let и const. Но прежде чем мы углубимся в различия между var, let и const, имеются некоторые темы, которые вам следует узнать в первую очередь. Это объявление переменных и их инициализация, область видимости (особая область видимости функции) и “поднятие”.

Объявление и инициализация переменных

Объявление переменной вводит новый идентификатор.

Выше мы создаем новый идентификатор который мы назвали “declaration”. В Javascript, при создании, переменные инициализируются со значением undefined. Это означает, что если мы попробуем вывести нашу переменную declaration, мы получим undefined.

И так, мы вывели переменную declaration и мы получили undefined.

По сравнению с объявлением переменной, инициализация переменной это когда вы в первый раз устанавливаете значение этой переменной.

И так, здесь мы инициализировали переменную declaration записывая в неё строку.

Это приводит нас к следующему понятию, область видимости.

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

“Если объявление переменной происходит внутри объявления функции, переменная определяется в локальной области видимости этой функции…”

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

Выше мы попытались получить доступ к переменной снаружи функции, в которой она была объявлена. Так как областью видимости переменной date является функция getDate, она доступна только внутри этой функции или в любой другой функции вложенной в getDate(как показано ниже).

Теперь давайте взглянем на более продвинутый пример. Скажем, у нас есть массив prices и нам требуется функция, которая принимает этот массив, а так же переменную discount, и возвращает нам новый массив цен со скидками. Конечная цель может выглядеть примерно так:

И реализация может выглядеть примерно так:

Выглядит достаточно просто, но какое это отношение имеет к области видимости блока? Взгляните на данный цикл for. Доступны ли переменные объявленные внутри него за его пределами? Оказывается доступны.

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

Оно не сломано, просто работает немного странно. На самом деле нет никаких причин иметь доступ к i, discountPrice и finalPrice за пределами цикла for. Это не приносит нам никакой пользы и может даже принести нам вред в некоторых ситуациях. Однако, так как переменные объявлены при помощи var, они входят в область видимости функции и вы можете получить к ним доступ.

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

“Поднятие”

Помните, ранее было сказано “В Javascript, при создании, переменные инициализируются со значением undefined “. Оказывается это и означает “поднятие”. Интерпретатор JavaScript назначает объявленным переменным значение undefined во время фазы называемой “Создание”.

Для более подробного изучения фазы Создания, “Поднятия” и областей видимости прочтите данную статью: “The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript”.

Давайте взглянем на предыдущий пример и увидим как “поднятие” влияет на него.

Обратите внимание, всем объявленным переменным было присвоено значение undefined. Вот почему если вы попытаетесь получить доступ к одной из них, до того как она на самом деле будет объявлена, вы просто получите undefined.

Теперь вы знаете все что нужно о var, теперь давайте наконец-то поговорим о главной цели, из-за которой мы здесь: в чем разница между var, let и const?

var, let или const

Для начала, давайте сравним var и let. Ключевое отличие между var и let это то, что let помимо глобальной области видимости и области видимости функции позволяет определять переменные в области видимости блока. Это означает, что переменная созданная при помощи ключевого слова let доступна внутри “блока”, где она была создана, также и внутри вложенных блоков. Когда я сказал “блок”, я имел в виду что-либо окруженное фигурными скобками <>, например цикл for или оператор if.

И так, давайте вернемся к нашей функции discountPrices в последний раз.

Вспомните, что мы вправе вывести i, discountPrice, и finalPrice за пределами цикла for, так как они были объявлены при помощи var, а переменные объявленные при помощи ключевого слова var ограничены областью видимости функции. Но что же произойдет теперь, если мы изменим var на let и попробуем запустить наш код?

Мы получили ReferenceError: i is not defined. Что говорит нам о том, что переменная, объявленная при помощи let, ограничена областью видимости блока, а не функции. Попытайтесь обратиться к i (или discountedPrice или finalPrice) за пределами “блока”, где они были объявлены, и это выдаст нам ошибку обращения, как мы только что увидели.

Следующие различие связано с “поднятием”. Ранее мы сказали, что определение “поднятия” это: “Интерпретатор JavaScript назначает объявленным переменным значение undefined во время фазы называемой “Создание”». Мы так же увидели это в действии при помощи вызова переменной до её объявления (вы получили undefined).

Я не могу вспомнить ни одного случая использования, когда вы на самом деле хотели бы получить доступ к переменной до её объявления. Кажется, что получить ReferenceError было бы лучше, чем получить undefined.

По факту, это и есть то что делает let. Если вы попытаетесь доступ к переменной до её объявление при помощи let, вместо получения undefined (как это было при объявлении при помощи var), вы получите ReferenceError.

let или const

Теперь вы понимаете разницу между var и let, что же о const? Оказывается, const почти такая же как и let. Однако есть одно отличие: если вы однажды присвоили значение используя const, вы не сможете его изменить на другое.

Вывод из того что выше — переменные, объявленные с помощью let могут быть перезаписаны, а переменные объявленные с помощью const не могут.

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

Заметьте, что изменения свойства объекта не является его перезаписью, так что даже если объект объявлен при помощи const, это не означает, что вы не можете изменить какие-либо из его свойств. Это только значит, что вы не можете перезаписать этот объект.

Теперь, наиболее важный вопрос, на который ещё не было ответа: что следует использовать var, let или const? Самое популярное мнение, и мнение которого придерживаюсь я, это использовать всегда const, пока вы не знаете будет ли переменная изменяться. Причина этого в том, что используя const вы даете понять себе и будущим разработчикам, которые должны прочитать ваш код, что эта переменная не должна изменяться. Если её потребуется изменить (например в цикле for), просто используйте let.

Между переменными, которые меняются и переменным которые не меняются, не так уж и много случаев осталось. Это значит, что вам больше никогда не придется использовать var.

Теперь непопулярное мнение, хотя оно все ещё имеет обоснование, это то что вы никогда не должны использовать const, несмотря на то что вы пытаетесь показать, что эта переменная неизменна, как мы видели выше, это не совсем так. Разработчики, которые придерживаются этого мнения всегда используют let пока нет переменных, которые на самом деле являются константами, такими как _LOCATION_ =….

Составим резюме выше сказанного, var ограничена областью видимости функции и если вы попытаетесь обратиться к такой переменной до её объявления вы получите undefined. const и let ограничены областью видимости блока и если вы попытаетесь обратиться к этим переменным до их объявления вы получите ReferenceError. И отличие между const и let это то, что значение, которое было присвоено const не может быть перезаписано, в отличие от let.

Первоначально данная статья была опубликована на tylermcginnis.com как часть курса Modern JavaScript

Спасибо за прочтение данного перевода, надеюсь вы познакомились для себя с чем-то новым и полезным. Буду рад увидеть обратную связь!

Источник

Javascript var, let и const (в чем отличие и когда использовать)?