ES6, я бы сказал, произвел революцию в концепции переменных Javascript, существовавшей год назад, введя новые ключевые слова let и const. И ни один другой разработчик не будет не согласен с тем фактом, что такой подход дал им возможность предотвратить заражение своих скриптов беспорядком переменных.
Здесь я напишу о некоторых ключевых характеристиках var, let и const.
Прежде чем сразу перейти к различным концепциям var, let и const, есть еще одна концепция, называемая «подъем», о которой, я думаю, важно иметь представление.
Подъем
давайте посмотрим на следующий код.
i = 34
console.log(`Let’s see what happens to i: ${i}`);
var i
Даже если переменная i присваивается до ее объявления, этот фрагмент кода успешно скомпилирует и распечатает значение i. Почему? Потому что, когда javascript компилирует свой код, он вытягивает все объявления переменных наверх. Но оставляет присваивания переменных и другие операторы на месте как есть. В результате при компиляции этот фрагмент кода превратится примерно в такой:
var i
i = 34
console.log(`Let’s see what happens to i: ${i}`);
Как видите, теперь понятно, почему этот код не показывал никаких ошибок. Этот процесс перемещения объявлений переменных наверх называется подъемом в javascript.
В случае let и const подъем на них не распространяется. Таким образом, мы не можем присвоить переменную let или const перед их объявлением.
Объем Вар
var в javascript ограничен функцией. И есть два типа прицелов.
- Глобальный
- Местный
Когда мы не объявляем и не инициализируем переменную в каких-либо функциях, она будет доступна во всем скрипте. Также означает, что переменная имеет глобальную область видимости.
С другой стороны, если переменная объявлена внутри функции, она будет доступна только в рамках этой конкретной функции.
Взгляните на следующий код:
(function(){
var one=10;
console.log(`variable one from inside the function: ${one}`);
})()
Это распечатает значение переменной «one», потому что переменная была объявлена, назначена и напечатана внутри функции.
А что, если мы попытаемся распечатать его извне функции? Это покажет ошибку ссылки, потому что переменная имеет локальную область видимости, что означает, что она доступна только внутри функции.
Посмотрим, что будет делать этот код:
var one=10;
(function(){
console.log(`variable one from inside the function: ${one}`);
})()
console.log(`variable one from outside the function: ${one}`);
Теперь, когда вы видите, что переменная не объявлена и не назначена внутри какой-либо функции, она будет доступна для всего скрипта. В результате это значение будет распечатано независимо от того, где мы хотим распечатать его в сценарии.
Это свойство var делает переменную доступной внутри объекта окна.
Если вы можете перейти на свою хромированную консоль и попытаться распечатать window.one, вы увидите, что переменная также доступна там. Что нехорошо. Потому что он может переопределить существующие свойства объекта окна.
Объем let и const
В отличие от var, let и const не имеют области видимости функции, а имеют область видимости блока. Это означает, что переменные let и constant будут доступны только внутри его блока. Взгляните на этот фрагмент кода:
(function(){
if(true){
let count = 2;
console.log(`count is ${count}`)
}
})()
Значение count будет успешно напечатано, потому что let объявлена внутри блока. Если переменная была объявлена вне области видимости блока, то очевидно, что она выдала бы ошибку ссылки, потому что let не имеет области видимости функции. Посмотрите на следующий код:
(function(){
if(true){
let count = 2;
}
console.log(`count is ${count}`)
})()
Переменная count не будет напечатана, потому что let доступна только в области видимости блока, но не в области видимости функции.
То же самое произойдет и с константой.
let и const нельзя переназначить как var
Вар можно переназначить. Посмотрите на следующий код:
var count = 1; var count = 3; var count = 5; console.log(count);
Попробуйте сделать это с помощью let или const. Они выдадут синтаксическую ошибку. Эта функция let и const исключает возможность случайного переназначения переменной.
const все еще изменяемый
Переменную const нельзя переназначить. И он должен быть объявлен и инициализирован в том же операторе. Значит, можно так:
const aConstVariable = 4;
Но вы не можете этого сделать:
const aConstVariable; aConstVariable = 4;
Однажды объявленная и инициализированная константа никогда не может быть изменена. Итак, делает ли это его полностью неизменным? Неа. Это не так. Вы все еще можете обновить значение константного объекта. Но вы никогда не сможете полностью переназначить его. Значит, можно так:
const aConstObj={
a:1,
b:2
}
aConstObj.b=5;
console.log(`value of b now is: ${aConstObj.b}`);
Но не это:
const aConstObj={
a:1,
b:2
}
//Reassigning the variable with an updated value of b
aConstObj={
a:1,
b:5
}
console.log(`value of b now is: ${aConstObj.b}`);
Вывод
Лучше всего использовать const как можно чаще. Если абсолютно необходимо переназначить переменную, тогда пусть будет лучшим выбором.
В конце концов, цель использования всех этих различных способов - написать более чистый, более читаемый и более эффективный код.
Спасибо, что были со мной здесь. Удачного кодирования !!
