Var, Let и Const - Каква е разликата?

Много блестящи нови функции излязоха с ES2015 (ES6). И сега, тъй като е 2020 г., се предполага, че много разработчици на JavaScript са се запознали и са започнали да използват тези функции.

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

Една от характеристиките, които идва с ES6, е добавянето на letи const, което може да се използва за деклариране на променливи. Въпросът е, какво ги прави различни от добрите, varкоито сме използвали? Ако все още не сте наясно с това, тази статия е за вас.

В тази статия, ние ще обсъдим var, letи const  по отношение на техния обхват, използване и подемно. Докато четете, вземете под внимание разликите между тях, които ще посоча.

Var

Преди появата на ES6, varдекларациите са управлявали. Има обаче проблеми, свързани с променливи, декларирани с var. Ето защо беше необходимо да се появят нови начини за деклариране на променливи. Първо, нека да разберем varповече, преди да обсъдим тези въпроси.

Обхват на var

Обхватът по същество означава къде тези променливи са достъпни за използване. varдекларациите са в глобален обхват или функционират / локално.

Обхватът е глобален, когато varпроменлива е декларирана извън функция. Това означава, че всяка променлива, която е декларирана varизвън функционален блок, е достъпна за използване в целия прозорец.

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

За да разберете допълнително, вижте примера по-долу.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

Тук greeterе глобално обхват, защото съществува извън функция, докато helloе обхват на функция. Така че не можем да получим достъп до променливата helloизвън функция. Така че, ако направим това:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

Ще получим грешка, която е резултат от helloлипсата на достъп извън функцията.

var променливите могат да бъдат повторно декларирани и актуализирани

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

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

и това също

 var greeter = "hey hi"; greeter = "say Hello instead"; 

Повдигане на вар

Повдигането е JavaScript механизъм, при който променливите и декларациите на функции се преместват в горната част на техния обхват преди изпълнението на кода. Това означава, че ако направим това:

 console.log (greeter); var greeter = "say hello" 

тълкува се така:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

Така varпроменливите се поставят в горната част на техния обхват и се инициализират със стойност от undefined.

Проблем с var

Има слабост, която идва с   var. Ще използвам примера по-долу, за да обясня:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

Така че, тъй като times > 3връща true, greeterсе предефинира на "say Hello instead". Въпреки че това не е проблем, ако съзнателно искате greeterда бъдете предефинирани, той се превръща в проблем, когато не осъзнавате, че дадена променлива greeterвече е била дефинирана преди.

Ако сте използвали greeterв други части на кода си, може да се изненадате от резултата, който може да получите. Това вероятно ще доведе до много грешки във вашия код. Ето защо letи constса необходими.

Позволявам

letсега се предпочита за деклариране на променлива. Не е изненада, тъй като идва като подобрение на varдекларациите. Той също така решава проблема с varтози, който току-що разгледахме. Нека помислим защо е така.

let е обхват на блока

Блокът е парче код, ограничено от {}. Блок живее в къдрави скоби. Всичко в къдравите скоби е блок.

Така че променлива, декларирана в блок с, let  е достъпна само за използване в рамките на този блок. Позволете ми да обясня това с пример:

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

Виждаме, че използването helloизвън неговия блок (къдравите скоби, където е дефинирано) връща грешка. Това е така, защото letпроменливите са обхванати от блок.

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

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

 let greeting = "say Hi"; greeting = "say Hello instead"; 

това ще върне грешка:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

Ако обаче една и съща променлива е дефинирана в различни обхвати, няма да има грешка:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

Защо няма грешка? Това е така, защото и двата екземпляра се третират като различни променливи, тъй като имат различен обхват.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

Just like  var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

  • var declarations are globally scoped or function scoped while let and const are block scoped.
  • var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
  • They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
  • While var and let can be declared without being initialized, const must be initialized during declaration.

Got any question or additions? Please let me know.

Thank you for reading :)