Var, Let и Const - в чем разница?

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

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

Одна из функций ES6 - добавление letи const, которые можно использовать для объявления переменных. Вопрос в том, чем они отличаются от старых добрых, varкоторые мы использовали? Если вы все еще не уверены в этом, то эта статья для вас.

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

Вар

До появления 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 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" 

Почему нет ошибки? Это связано с тем, что оба экземпляра рассматриваются как разные переменные, поскольку имеют разные области действия.

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

Кроме того, поскольку переменная не может быть объявлена ​​более одного раза в пределах области видимости, проблема, описанная ранее, которая возникает с var.

Подъем пусть

Так же , как   var, letдекларации поднимаются к вершине. В отличие от того, varчто инициализируется как undefined, letключевое слово не инициализируется. Поэтому, если вы попытаетесь использовать letпеременную перед объявлением, вы получите файл Reference Error.

Const

Переменные, объявленные с constпостоянными значениями. constдекларации имеют некоторое сходство с letдекларациями.

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 :)