Let js что это

  < 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; 

В чём разница между var, let и const в JavaScript

Сегодня вы узнаете два новых способа создавать переменные в JavaScript (ES6), а именно с помощью let и const . Мы разберёмся в чём разница между операторами var , let , и const . Ещё мы затронем такие темы, как: область видимости функции и блока, поднятие переменной (hoisting) и неизменность.

В спецификации ES2015 (ES6) нам представили два новых оператора для создания переменных: let и const . Чтобы понять различия между var , let , и const , мы должны сперва поговорить о таких понятиях, как: объявление и инициализация переменных, область видимости (особенно функции) и поднятие переменной.

Инициализация и объявление переменной

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

var declaration

Только что мы создали новый идентификатор с именем declaration. Когда в JavaScript создаётся переменная, она инициализируется со значением undefined . Если мы сейчас попытаемся логировать переменную declaration , то нам вернётся undefined .

var declarationconsole.log(declaration)

Инициализация — это присваивание значения переменной.

var declarationconsole.log(declaration) // undefineddeclaration = 'This is an initialization'

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

Это подводит нас к понятию «область видимости».

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

Область видимости определяет, где в коде программы будут доступны переменные и функции. В JavaScript есть два типа области видимости — глобальная и локальная (global scope и function scope). Согласно официальной спецификации:

Если переменная создаётся внутри объявления функции, то её область видимости определяется как локальная и ограничивается этой функцией.

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

function getDate () var date = new Date()return date
>getDate()
console.log(date) // ❌ Reference Error

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

function getDate () var date = new Date()function formatDate () return date.toDateString().slice(4) // ✅ 
>return formatDate()
>getDate()
console.log(date) // ❌ Reference Error

Давайте рассмотрим более сложный пример. Допустим у нас есть массивы prices и discount , нам нужно создать функцию, которая возьмёт значения из обоих массивов и вернёт новый массив цен с учётом скидок. В итоге у нас должен получится такой массив:

discountPrices([100, 200, 300], .5)

function discountPrices (prices, discount) var discounted = []for (var i = 0; i < prices.length; i++) var discountedPrice = prices[i] * (1 - discount) 
var finalPrice = Math.round(discountedPrice * 100) / 100 
discounted.push(finalPrice) 
>return discounted
>

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

function discountPrices (prices, discount) var discounted = []for (var i = 0; i < prices.length; i++) var discountedPrice = prices[i] * (1 - discount) 
var finalPrice = Math.round(discountedPrice * 100) / 100 
discounted.push(finalPrice) 
>console.log(i) // 3 
console.log(discountedPrice) // 150 
console.log(finalPrice) // 150return discounted
>

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

Здесь нет ошибки, это просто немного необычно. К тому же, у нас нет необходимости иметь доступ к i , discountedPrice , и finalPrice вне цикла for . Для нас в этом нет никакой пользы, более того, в некоторых случаях это может мешать. Тем не менее, поскольку переменные, объявлены оператором var , они относятся к функции и доступны вне цикла.

Теперь вы знаете, что такое область видимости, инициализация и объявление переменных; нам осталось разобраться с понятием «поднятие переменной» (hoisting), прежде чем перейти к let и const .

Hoisting

Ранее я уже говорил, что при создании переменной в JavaScript, она инициализируются со значением undefined . Это и есть «Hoisting». Интерпретатор JavaScript присваивает переменой значение undefined по умолчанию, во время так называемой фазы «Создания».

Давайте посмотрим, как действует hoisting, на предыдущем примере:

function discountPrices (prices, discount) var discounted = undefined 
var i = undefined 
var discountedPrice = undefined 
var finalPrice = undefineddiscounted = [] 
for (var i = 0; i < prices.length; i++) discountedPrice = prices[i] * (1 - discount) 
finalPrice = Math.round(discountedPrice * 100) / 100 
discounted.push(finalPrice) 
>console.log(i) // 3 
console.log(discountedPrice) // 150 
console.log(finalPrice) // 150return discounted
>

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

function discountPrices (prices, discount) console.log(discounted) // undefinedvar discounted = []for (var i = 0; i < prices.length; i++) var discountedPrice = prices[i] * (1 - discount) 
var finalPrice = Math.round(discountedPrice * 100) / 100 
discounted.push(finalPrice) 
>console.log(i) // 3 
console.log(discountedPrice) // 150 
console.log(finalPrice) // 150return discounted
>

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

var VS let VS const

Сперва сравним var и let . Главное отличие let в том, что область видимости переменной ограничивается блоком, а не функцией. Другими словами, переменная, созданная с помощью оператора let , доступна внутри блока, в котором она была создана и в любом вложенном блоке. Говоря «блок», я имею ввиду всё что вложено между фигурными скобками <> , как например в цикле for или условии if .

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

function discountPrices (prices, discount) var discounted = []for (var i = 0; i < prices.length; i++) var discountedPrice = prices[i] * (1 - discount) 
var finalPrice = Math.round(discountedPrice * 100) / 100 
discounted.push(finalPrice) 
>console.log(i) // 3 
console.log(discountedPrice) // 150 
console.log(finalPrice) // 150return discounted
>

Помните, что мы можем логировать i , discountedPrice , и finalPrice вне цикла for , так как они созданы с помощью var , а значит видны в пределах функции. Но, что, если мы заменим оператор var на let и попробуем выполнить код.

function discountPrices (prices, discount) let discounted = []for (let i = 0; i < prices.length; i++) let discountedPrice = prices[i] * (1 - discount) 
let finalPrice = Math.round(discountedPrice * 100) / 100 
discounted.push(finalPrice) 
>console.log(i) // 3 
console.log(discountedPrice) // 150 
console.log(finalPrice) // 150return discounted
>discountPrices([100, 200, 300], .5) // ❌ ReferenceError: i is not defined

Вот что мы получим: ReferenceError: i is not defined . Это подтверждает, что let переменные ограничены блоком, а не функцией. Поэтому попытка получить к ним доступ приводит к ошибке.

var VS letvar: function scopedlet: block scoped

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

function discountPrices (prices, discount) console.log(discounted) // undefinedvar discounted = []for (var i = 0; i < prices.length; i++) var discountedPrice = prices[i] * (1 - discount) 
var finalPrice = Math.round(discountedPrice * 100) / 100 
discounted.push(finalPrice) 
>console.log(i) // 3 
console.log(discountedPrice) // 150 
console.log(finalPrice) // 150return discounted
>

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

Кстати, именно это и делает let , т.е. вы получите ошибку ReferenceError вместо значения undefined , если запросите переменную, созданную оператором let , до её объявления.

function discountPrices (prices, discount) console.log(discounted) // ❌ ReferenceErrorlet discounted = []for (let i = 0; i < prices.length; i++) let discountedPrice = prices[i] * (1 - discount) 
let finalPrice = Math.round(discountedPrice * 100) / 100 
discounted.push(finalPrice) 
>console.log(i) // 3 
console.log(discountedPrice) // 150 
console.log(finalPrice) // 150return discounted
>

var VS letvar: 
function scoped 
undefined when accessing a variable before it's declaredlet: 
block scoped 
ReferenceError when accessing a variable before it's declared

let VS const

Различия между var и let мы выяснили, а что насчёт const ? Получается, что const и let почти одно и тоже. И всё же есть одно отличие: значение переменной, объявленной с помощью const , нельзя переназначить. Это можно увидеть в примере ниже:

let name = 'Tyler'
const handle = 'tylermcginnis'name = 'Tyler McGinnis' // ✅
handle = '@tylermcginnis' // ❌ TypeError: Assignment to constant variable.

Итак, если вы хотите, чтобы переменная была неизменной, используйте const . Ну, почти. На самом деле оператор const не делает переменную неизменной, а только не даёт переназначать её значение. Вот хороший пример:

const person = name: 'Kim Kardashian'
>person.name = 'Kim Kardashian West' // ✅person = <> // ❌ Assignment to constant variable.

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

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

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

Теперь «непопулярное» мнение, хотя оно и обоснованно (пока): вы никогда не должны использовать const, потому что, хотя вы пытаетесь показать, что переменная неизменна, это не совсем правда (мы видели это на примере выше). Разработчики, которые разделяют это мнение, всегда используют let , за исключением случаев когда переменная действительно является константой, например _LOCATION_ = . .

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

var VS let VS constvar: 
function scoped 
undefined when accessing a variable before it's declaredlet: 
block scoped 
ReferenceError when accessing a variable before it's declaredconst: 
block scoped 
ReferenceError when accessing a variable before it's declared 
can't be reassigned

Let js что это

В Javascript ключевое слово var относится к функциональной области видимости. Этим javascript отличается от многих языков программирования (C# / Java и т. д.), в которых переменные имеют блочную область видимости. Если представить блочную видимость в JavaScript, то в примере ниже мы ожидаем, что в консоль попадет 123 , однако вместо этого будет выведено 456 :

1 2 3 4 5

var foo = 123; if (true)  var foo = 456; > console.log(foo); // 456 

Так происходит, потому что < не создает новую область видимости переменных. Переменная foo , которая находится внутри if, ведет себя так же, как если бы она была объявлена вне его. Это поведение часто является источником ошибок в JavaScript. По этой причине TypeScript (и ES6) добавили ключевое слово let , которое позволяет нам объявлять переменные с настоящей блочной областью видимости.

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

1 2 3 4 5

let foo = 123; if (true)  let foo = 456; > console.log(foo); // 123 

Еще один пример, где let может защитить вас от ошибок.

1 2 3 4 5 6

var index = 0; var array = [1, 2, 3]; for (let index = 0; index  array.length; index++)  console.log(array[index]); > console.log(index); // 0 

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

Функции создают новую область видимости¶

Поскольку мы упоминали об этом, мы хотели бы продемонстрировать, что функции создают новую область видимости переменных в JavaScript:

1 2 3 4 5 6

var foo = 123; function test()  var foo = 456; > test(); console.log(foo); // 123 

Это ведет себя так, как вы ожидаете. Без этого было бы очень сложно писать код на JavaScript.

Сгенерированный JS¶

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

1 2 3 4 5 6 7 8 9

if (true)  let foo = 123; > // становится // if (true)  var foo = 123; > 

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

 1 2 3 4 5 6 7 8 9 10 11

var foo = '123'; if (true)  let foo = 123; > // становится // var foo = '123'; if (true)  var foo_1 = 123; // просто переименовываем > 

Switch¶

Мы можем обернуть тело case , используя <> для переиспользования имени переменной в других case выражениях, как показано ниже:

 1 2 3 4 5 6 7 8 9 10 11 12

switch (name)  case 'x':  let x = 5; // . break; > case 'y':  let x = 10; // . break; > > 

let в замыканиях¶

Самый частый вопрос на собеседовани — какой будет результат при исполнении следующего кода:

 1 2 3 4 5 6 7 8 9 10 11

var funcs = []; // создаем список функций for (var i = 0; i  3; i++)  funcs.push(function ()  console.log(i); >); > // вызываем их for (var j = 0; j  3; j++)  funcs[j](); > 

Начинающие разработчики часто говорят, что результатом будет 0,1,2 . Однако очень сильно удивляются, когда узнают, что этот ответ неправильный, а результатом исполнения функции будет 3 во всех трех функциях. Так происходит, потому что все эти функции выводят значение переменной i из окружающей области видимости, в момент вызова этих функций она равняется 3.

Одним из возможных вариантов исправления этой ошибки является создание функции для каждой итерации цикла. Как мы узнали ранее, мы можем создать новую область видимости с помощью немедленно вызывающейся функции (паттерн IIFE (function() < /* body */ >)(); ):

 1 2 3 4 5 6 7 8 9 10 11 12 13 14

var funcs = []; // создаем список функций for (var i = 0; i  3; i++)  (function ()  var local = i; funcs.push(function ()  console.log(local); >); >)(); > // вызываем их for (var j = 0; j  3; j++)  funcs[j](); > 

В этом примере функция замыкает (поэтому ее и называют замыкание ) локальные переменные (по соглашению называемые local ) и использует их вместо i , которая используется в цикле.

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

В ES6 ключевое слово let в цикле будет иметь такое же поведение, как и в примере ранее:

 1 2 3 4 5 6 7 8 9 10 11 12

var funcs = []; // создаем список инструкций for (let i = 0; i  3; i++)  // используем let funcs.push(function ()  console.log(i); >); > // вызываем for (var j = 0; j  3; j++)  funcs[j](); > 

Использование let вместо var создает переменную i , уникальную для каждой итерации цикла.

Резюме¶

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

Переменные: 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](); // 5

const

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

const apple = 5; apple = 10; // ошибка

В остальном объявление const полностью аналогично let .

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

const user = < name: "Вася" >; user.name = "Петя"; // допустимо user = 5; // нельзя, будет ошибка

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

константы и КОНСТАНТЫ

Константы, которые жёстко заданы всегда, во время всей программы, обычно пишутся в верхнем регистре. Например: const ORANGE = «#ffa500» .

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

Итого

• Видны только после объявления и только в текущем блоке.
• Нельзя переобъявлять (в том же блоке).
• При объявлении переменной в цикле for(let …) – она видна только в этом цикле. Причём каждой итерации соответствует своя переменная let .

Переменная const – это константа, в остальном – как let .