Переменные: let и const
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
В ES-2015 предусмотрены новые способы объявления переменных: через let и const вместо var .
let a = 5;let
У объявлений переменной через let есть три основных отличия от var :
-
Область видимости переменной let – блок <. >. Как мы помним, переменная, объявленная через var , видна везде в функции. Переменная, объявленная через let , видна только в рамках блока <. >, в котором объявлена. Это, в частности, влияет на объявления внутри if , while или for . Например, переменная через var :
var apples = 5; if (true) < var apples = 10; alert(apples); // 10 (внутри блока) >alert(apples); // 10 (снаружи блока то же самое)В примере выше apples – одна переменная на весь код, которая модифицируется в if . То же самое с let будет работать по-другому:
let apples = 5; // (*) if (true) < let apples = 10; alert(apples); // 10 (внутри блока) >alert(apples); // 5 (снаружи блока значение не изменилось)Здесь, фактически, две независимые переменные apples , одна – глобальная, вторая – в блоке if . Заметим, что если объявление let apples в первой строке (*) удалить, то в последнем alert будет ошибка: переменная не определена:
if (true) < let apples = 10; alert(apples); // 10 (внутри блока) >alert(apples); // ошибка!alert(a); // undefined var a = 5;С переменными let всё проще. До объявления их вообще нет. Такой доступ приведёт к ошибке:
alert(a); // ошибка, нет такой переменной let a = 5;Заметим также, что переменные let нельзя повторно объявлять. То есть, такой код выведет ошибку:
let x; let x; // ошибка: переменная x уже объявленаЭто – хоть и выглядит ограничением по сравнению с var , но на самом деле проблем не создаёт. Например, два таких цикла совсем не конфликтуют:
// каждый цикл имеет свою переменную i for(let i = 0; i for(let i = 0; i alert( i ); // ошибка: глобальной i нетfor(var i=0; i alert(i); // 10С переменной let – всё по-другому. Каждому повторению цикла соответствует своя независимая переменная let . Если внутри цикла есть вложенные объявления функций, то в замыкании каждой будет та переменная, которая была при соответствующей итерации. Это позволяет легко решить классическую проблему с замыканиями, описанную в задаче Армия функций.
function makeArmy() < let shooters = []; for (let i = 0; i < 10; i++) < shooters.push(function() < alert( i ); // выводит свой номер >); > return shooters; > var army = makeArmy(); army[0](); // 0 army[5](); // 5const
Объявление const задаёт константу, то есть переменную, которую нельзя менять:
const apple = 5; apple = 10; // ошибкаВ остальном объявление const полностью аналогично let .
Заметим, что если в константу присвоен объект, то от изменения защищена сама константа, но не свойства внутри неё:
const user = < name: "Вася" >; user.name = "Петя"; // допустимо user = 5; // нельзя, будет ошибкаТо же самое верно, если константе присвоен массив или другое объектное значение.
константы и КОНСТАНТЫ
Константы, которые жёстко заданы всегда, во время всей программы, обычно пишутся в верхнем регистре. Например: const ORANGE = «#ffa500» .
Большинство переменных – константы в другом смысле: они не меняются после присвоения. Но при разных запусках функции это значение может быть разным. Для таких переменных можно использовать const и обычные строчные буквы в имени.
Итого
- Видны только после объявления и только в текущем блоке.
- Нельзя переобъявлять (в том же блоке).
- При объявлении переменной в цикле for(let …) – она видна только в этом цикле. Причём каждой итерации соответствует своя переменная let .
Переменная const – это константа, в остальном – как let .
Ключевое слово let
В редакцию ES2015 были введены два новых важных ключевых слова JavaScript — let и const.
Эти два ключевых слова позволяют в JavaScript декларировать переменные и константы с областью видимости внутри блока.
До редакции ES2015 в JavaScript было только два типа области видимости — глобальная и внутри функции.
Глобальная область видимости
Переменные, декларированные глобально (вне какой-либо функции), обладают глобальной областью видимости.
var carName = "Volvo"; // расположенный здесь код может использовать переменную carName function myFunction() < // расположенный здесь код также может использовать переменную carName >
Доступ к глобальным переменным можно получить из любого места программы на JavaScript.
Область видимости внутри функции
Переменные, декларированные локально (внутри какой-либо функции), обладают областью видимости внутри функции.
// расположенный здесь код не может использовать переменную carName function myFunction() < var carName = "Volvo"; // расположенный здесь код может использовать переменную carName >
Доступ к локальным переменным можно получить только внутри той функции, где эти переменные были декларированы.
Область видимости внутри блока
Переменные, декларированные при помощи ключевого слова var, не обладают областью видимости внутри блока.
Т.е. доступ к таким переменным, декларированным внутри блока , можно получить и вне этого блока.
< var x = 2; >// здесь переменную x МОЖНО использовать
До редакции ES2015 в JavaScript не было области видимости внутри блока.
Начиная с редакции ES2015 переменные, декларированные при помощи ключевого слова let, приобретают область видимости внутри блока. В результате этого переменные, декларированные таким образом внутри блока , становятся недоступными за пределами этого блока.
< let x = 2; >// здесь переменную x НЕЛЬЗЯ использовать
Передекларирование переменных
Передекларирование переменной при помощи ключевого слова var может вызвать проблемы.
Так, если передекларировать переменную внутри блока, то она будет перекларирована и за его пределами:
var x = 10; // Здесь значение x равно 10 < var x = 2; // Здесь значение x равно 2 >// Здесь значение x равно 2
Решить эту проблему можно, если передекларировать переменную при помощи ключевого слова let.
В этом случае передекларирование переменной внутри блока не будет передекларировать переменную за пределами этого блока:
var x = 10; // Здесь значение x равно 10 < let x = 2; // Здесь значение x равно 2 >// Здесь значение x равно 10
Область видимости внутри цикла
Использование ключевого слова var в цикле:
var i = 5; for (var i = 0; i < 10; i++) < // какой-то код >// Здесь значение i равно 10
Использование ключевого слова let в цикле:
let i = 5; for (let i = 0; i < 10; i++) < // какой-то код >// Здесь значение i равно 5
В первом примере переменная, декларированная в цикле при помощи ключевого слова var, также передекрарирует переменную за пределами цикла.
Во втором примере переменная, декларированная в цикле с ключевым словом let, не передекрарирует переменную за пределами цикла, оставляя неизменным ее значение, так как использование ключевого слова let для декларирования переменной i в цикле делает переменную i видимой только внутри этого цикла.
Область видимости внутри функции
Поведение переменных, декларированных внутри функции при помощи ключевых слов var и let, одинаковое. В обоих случаях у переменных будет локальная область видимости.
function myFunction() < var carName = "Volvo"; // Область видимости внутри функции >function myFunction() < let carName = "Volvo"; // Область видимости внутри функции >
Глобальная область видимости
Поведение переменных, декларированных вне блока при помощи ключевых слов var и let, одинаковое. В обоих случаях у переменных будет глобальная область видимости.
var x = 2; // Глобальная область видимости let x = 2; // Глобальная область видимости
Глобальные переменные в HTML
В JavaScript глобальная область видимости распространяется на все окружение JavaScript.
В HTML глобальная область видимости — это глобальный объект window.
Глобальные переменные, декларированные при помощи ключевого слова var, принадлежат глобальному объекту window:
var carName = "Volvo"; // здесь код может использовать window.carName
Глобальные переменные, декларированные при помощи ключевого слова let, не принадлежат глобальному объекту window:
let carName = "Volvo"; // здесь код не может использовать window.carName
Передекларирование
Передекларировать переменную JavaScript при помощи ключевого слова var можно в любом месте программы:
var x = 2; // Значение x равно 2 var x = 3; // Теперь значение x равно 3
Нельзя передекларировать переменную, которая была декларирована при помощи ключевого слова var, при помощи ключевого слова let в той же области видимости или в том же блоке:
var x = 2; // Можно let x = 3; // Нельзя < var x = 4; // Можно let x = 5 // Нельзя >
Нельзя передекларировать переменную, которая была декларирована при помощи ключевого слова let, при помощи ключевого слова let в той же области видимости или в том же блоке:
let x = 2; // Можно let x = 3; // Нельзя < let x = 4; // Можно let x = 5; // Нельзя >
Нельзя передекларировать переменную, которая была декларирована с ключевым словом let, при помощи ключевого слова var в той же области видимости или в том же блоке:
let x = 2; // Можно var x = 3; // Нельзя < let x = 4; // Можно var x = 5; // Нельзя >
Передекларировать переменную при помощи ключевого слова let в другой области видимости или в другом блоке можно:
let x = 2; // Можно < let x = 3; // Можно > < let x = 4; // Можно >
Поднятие
Переменные, декларированные при помощи ключевого слова var, «поднимаются» в верх JavaScript кода (если вы не знаете, что такое «поднятие» в JavaScript, то см. главу Поднятие переменных в Javascript).
Таким образом, мы можем использовать такие переменные до того, как они будут декларированы:
// здесь МОЖНО использовать carName var carName;
Переменные, декларированные при помощи ключевого слова let, не «поднимаются» в верх JavaScript кода.
Использование переменной, декларированной при помощи ключевого слова let, до ее реальной декларации приведет к ошибке ReferenceError.
В этом случае такая переменная находится в, так называемой, «временной мертвой зоне» с начала блока и до ее декларации:
// здесь НЕЛЬЗЯ использовать carName let carName;
Как расшифровывается let в JavaScript?
Подскажите, как расшифровывается let в JavaScript?
Если с var и const понятно, то тут как-то не ясно.
Отслеживать
13.7k 12 12 золотых знаков 43 43 серебряных знака 75 75 бронзовых знаков
задан 26 янв 2018 в 12:22
Дмитрий Жемчужнов Дмитрий Жемчужнов
54 4 4 бронзовых знака
26 янв 2018 в 12:24
26 янв 2018 в 12:32
Тут (особенно в комментариях к ответам) можно найти много интересного. 🙂
26 янв 2018 в 12:33
Я правильно понял, что let значит «пусть» дословно?
26 янв 2018 в 12:34
«Пусть», «пускай», «положим», «допустим». «Let» как глагол, буквально, «позволять»/»допускать».
– user181100
26 янв 2018 в 15:43
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
https://learn.javascript.ru/let-const расписаны все различия между let var const
а по значению слова — как в математике: «let x = 5 ~ пусть x = 5»
Отслеживать
ответ дан 26 янв 2018 в 12:31
SelfishCrawler SelfishCrawler
627 3 3 серебряных знака 11 11 бронзовых знаков
Спасибо! Различия я понимаю. Интересует происхождение самого ключевого слова.
26 янв 2018 в 12:32
Как в математике — «пусть x = 5»
26 янв 2018 в 12:37
@kleshenki добавьте это в ответ пожалуйста
26 янв 2018 в 13:37
let — это математическое утверждение, принятое в ранних языках программирования как Basic. Обычные переменные считаются мало абстрактными, а создатели языков хотели выделить более высокий уровень абстракции, где let означало переменную, которая может быть назначена, но не изменена, что позволяло компилятору легче искать ошибки.
JavaScript использует var со времён создания языка, поэтому просто нужно было другое ключевое слово и разработчик языка позаимствовал из других языков, которые используют let как что-то, что ближе к var .
Но в JavaScript let создаёт локальную переменную в определённой области блока кода.
Прошу исправить если был в чём-то не точен.
Отслеживать
ответ дан 26 янв 2018 в 14:10
437 4 4 серебряных знака 17 17 бронзовых знаков
если переводишь ответ, стоит добавлять ссылку на него: stackoverflow.com/a/37917071/2881286
26 янв 2018 в 14:18
- javascript
- терминология
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Что такое let в javascript
Директива let объявляет переменную с блочной областью видимости с возможностью инициализировать её значением.
Синтаксис
let var1 [= value1] [, var2 [= value2]] [, . varN [= valueN]];
Параметры
var1 , var2 , …, varN
Имя переменной. Может использоваться любой допустимый идентификатор.
Значение переменной. Любое допустимое выражение.
Описание
Директива let позволяет объявить локальную переменную с областью видимости, ограниченной текущим блоком кода . В отличие от ключевого слова var (en-US) , которое объявляет переменную глобально или локально во всей функции, независимо от области блока.
Объяснение, почему было выбрано название «let» можно найти здесь.
Правила области видимости
Областью видимости переменных, объявленных ключевым словом let , является блок, в котором они объявлены, и все его подблоки. В этом работа директива let схожа с работой директивы var . Основная разница заключается в том, что областью видимости переменной, объявленной директивой var , является вся функция, в которой она объявлена:
function varTest() var x = 1; if (true) var x = 2; // та же переменная! console.log(x); // 2 > console.log(x); // 2 > function letTest() let x = 1; if (true) let x = 2; // другая переменная console.log(x); // 2 > console.log(x); // 1 >
Чище код во вложенных функциях
let иногда делает код чище при использовании вложенных функций.
var list = document.getElementById("list"); for (let i = 1; i 5; i++) let item = document.createElement("li"); item.appendChild(document.createTextNode("Item " + i)); item.onclick = function (ev) console.log("Item " + i + " is clicked."); >; list.appendChild(item); > // чтобы получить такой же эффект с использованием 'var' // необходимо создать новый контекст // используя замыкание, чтобы сохранить значение неизменённым for (var i = 1; i 5; i++) var item = document.createElement("li"); item.appendChild(document.createTextNode("Item " + i)); (function (i) item.onclick = function (ev) console.log("Item " + i + " is clicked."); >; >)(i); list.appendChild(item); >
Пример выше будет выполнен как и ожидается, так как пять экземпляров внутренней функции (анонимной) будут ссылаться на пять разных экземпляров переменной i . Пример будет выполнен неверно, если заменить директиву let на var, или удалить переменную i из параметров вложенной функции и использовать внешнюю переменную i во внутренней функции.
На верхнем уровне скриптов и функций let, в отличии от var, не создаёт свойства на глобальном объекте . Например:
var x = "global_x"; let y = "global_y"; console.log(this.x); // 'global_x' console.log(this.y); // undefined
В выводе программы будет отображено слово «global_x» для this.x , но undefined для this.y .
Эмуляция приватных членов
При взаимодействии с конструкторами можно использовать выражение let чтобы открыть доступ к одному или нескольким приватным членам через использование замыканий:
var SomeConstructor; let privateScope = >; SomeConstructor = function SomeConstructor() this.someProperty = "foo"; privateScope.hiddenProperty = "bar"; >; SomeConstructor.prototype.showPublic = function () console.log(this.someProperty); // foo >; SomeConstructor.prototype.showPrivate = function () console.log(privateScope.hiddenProperty); // bar >; > var myInstance = new SomeConstructor(); myInstance.showPublic(); myInstance.showPrivate(); console.log(privateScope.hiddenProperty); // error
Эта техника позволяет получить только «статичное» приватное состояние — в примере выше, все экземпляры полученные из конструктора SomeConstructor будут ссылаться на одну и ту же область видимости privateScope .
Временные мёртвые зоны и ошибки при использовании let
Повторное объявление той же переменной в том же блоке или функции приведёт к выбросу исключения SyntaxError.
if (x) let foo; let foo; // SyntaxError thrown. >
В стандарте ECMAScript 2015 переменные, объявленные директивой let, переносятся в начало блока. Но если вы сошлётесь в блоке на переменную, до того как она объявлена директивой let, то это приведёт к выбросу исключения ReferenceError (en-US) , потому что переменная находится во «временной мёртвой зоне» с начала блока и до места её объявления. (В отличии от переменной, объявленной через var , которая просто будет содержать значение undefined )
function do_something() console.log(bar); // undefined console.log(foo); // ReferenceError: foo is not defined var bar = 1; let foo = 2; >
Вы можете столкнуться с ошибкой в операторах блока switch (en-US) , так как он имеет только один подблок.
switch (x) case 0: let foo; break; case 1: let foo; // Выброс SyntaxError из-за повторного объявления переменной break; >
Использование let в циклах for
Вы можете использовать ключевое слово let для привязки переменных к локальной области видимости цикла for . Разница с использованием var в заголовке цикла for , заключается в том, что переменные объявленные var , будут видны во всей функции, в которой находится этот цикл.
var i = 0; for (let i = i; i 10; i++) console.log(i); >
Правила области видимости
for (let expr1; expr2; expr3) statement;
В этом примере expr2, *expr3, statement *заключены в неявный блок, который содержит блок локальных переменных, объявленных конструкцией let expr1 . Пример приведён выше.
Примеры
let vs var
Когда let используется внутри блока, то область видимости переменной ограничивается этим блоком. Напомним, что отличие заключается в том, что областью видимости переменных, объявленных директивой var, является вся функция, в которой они были объявлены.
var a = 5; var b = 10; if (a === 5) let a = 4; // The scope is inside the if-block var b = 1; // The scope is inside the function console.log(a); // 4 console.log(b); // 1 > console.log(a); // 5 console.log(b); // 1
let в циклах
Вы можете использовать ключевое слово let для привязки переменных к локальной области видимости цикла for , вместо того что бы использовать глобальные переменные (объявленные с помощью var ).
for (let i = 0; i 10; i++) console.log(i); // 0, 1, 2, 3, 4 . 9 > console.log(i); // i is not defined
Нестандартизированные расширения let
let блок
Предупреждение: Поддержка let блоков была убрана в Gecko 44 баг 1023609.
let блок предоставляет способ, ассоциировать значения с переменными внутри области видимости этого блока, без влияния на значения переменных с теми же именами вне этого блока.
Синтаксис
let (var1 [= value1] [, var2 [= value2]] [, . , varN [= valueN]]) block;
Описание
let блок предоставляет локальную область видимости для переменных. Работа его заключается в привязке нуля или более переменных к области видимости этого блока кода, другими словами, он является блоком операторов. Отметим, что область видимости переменных, объявленных директивой var , в блоке let , будет той же самой, что и если бы эти переменные были объявлены вне блока let , иными словами областью видимости таких переменных по-прежнему является функция. Скобки в блоке let являются обязательными. Опускание их приведёт к синтаксической ошибке.
Пример
var x = 5; var y = 0; let (x = x+10, y = 12) console.log(x+y); // 27 > console.log(x + y); // 5
Правила для этого блока кода аналогичны как и для любого другого блока кода в JavaScript. Он может содержать свои локальные переменные, объявленные let .
Правила области видимости
Областью видимости переменных, объявленных директивой let , в блоке let является сам блок и все подблоки в нем, если они не содержат объявлений переменных с теми же именами.
let выражения
Предупреждение: Поддержка let выражений была убрана в Gecko 41 баг 1023609.
let выражение позволяет объявить переменные с областью видимости ограниченной одним выражением.
Синтаксис
let (var1 [= value1] [, var2 [= value2]] [, . varN [= valueN]]) expression;
Пример
Вы можете использовать let для объявления переменных, областью видимости которых является только одно выражение:
var a = 5; let(a = 6) console.log(a); // 6 console.log(a); // 5
Правила области видимости
В данном let выражении:
let (decls) expr
* expr *оборачивается в неявный блок.
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-let-and-const-declarations |
Поддержка браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.