Разница между var, let и const в JavaScript

До ECMAScript 6 JavaScript использовал ключевое слово var для объявления переменных. ECMAScript 6 добавил два новых ключевых слова для объявления переменных. Это let и const. Таким образом, после ES6 в JavaScript есть три способа объявления переменных: var, let и const.

Но все они работают немного по-разному. Основные различия между тремя объявлениями переменных с ключевыми словами var, let и const:

• Переназначение переменных
• Переменная область действия
• Переменный подъем
• Переопределение переменной

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

Переназначение переменных

Переназначение переменных в JavaScript — это возможность изменить или переназначить значение переменной в любое время.

1. Все переменные, объявленные с ключевым словом var, могут быть назначены и переназначены новому значению по желанию. Посмотрите на следующий фрагмент кода, в котором мы назначили и переназначили новое значение переменной с помощью ключевого слова var.

Пример 1:

<script>
// Declaration and assignment of variable.
   var flower = "Rose";
   document.write("Original value of variable: " +flower+ "<br>");
// A new value reassigned.
   flower = "Lotus";
   document.write("Value of variable after reassignment: " +flower);
</script>

Output:
        Original value of variable: Rose
        Value of variable after reassignment: Lotus

2. Ключевое слово let также позволяет нам объявить переменную, которая может быть переназначена в любое время в скрипте. Посмотрите на следующий пример фрагмента кода ниже.

Пример 2:

<script>
// Declared and assigned a variable.
   let firstName = "Deep";
   document.write("First name: " +firstName+ "<br>");
// A new value reassigned to the variable.
   firstName = "Herry";
   document.write("First name after reassignment: " +firstName);
</script>

Output:
        First name: Deep
        First name after reassignment: Herry

3. Ключевое слово const не позволяет нам переназначить новое значение переменной после ее инициализации. Оно не позволяет переназначать так же, как ключевые слова var и let.

Если мы попытаемся переназначить или изменить новое значение, интерпретатор Java выдаст ошибку. Давайте разберем пример на его основе.

Пример 3:

<script>
// Declared and assigned a variable using const keyword.
   const city = "Dhanbad";
   document.write("City: " +city+ "<br>");
// A new value reassigned to the variable.
   city = "New York";
   document.write("New city: " +city); // throw error.
</script>

Output:
         City: Dhanbad
         TypeError: Assignment to constant variable

В табличной форме:

Переменная область действия

Область действия переменной в JavaScript — это область кода, из которой можно получить доступ к переменной.

1. Все переменные JavaScript, объявленные с ключевым словом var, называются переменными функциональной области действия, поскольку они имеют функциональную область действия. Переменные функциональной области действия, объявленные вне функции, доступны глобально для скрипта (т. е. по всему скрипту).

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

Пример 4:

<script>
  var p = 20; // accessible globally.
  function myFunction()
  {
    document.write(p+ "<br>");
    var q = 30; // accessible throughout the function.
    if(true)
    {
      document.write(q+ "<br>");
      var r = 40; // accessible throughout the function.
     }
    document.write(r);
   }
 myFunction(); // Calling function.
</script>

Output:
        20
        30
        40

Как вы можете заметить в приведенном выше коде, переменная r доступна за пределами оператора if. Чтобы преодолеть эту доступность, ES6 ввел оператор let, который может использоваться для объявления переменной, которая находится в области действия блока.

2. Все переменные, объявленные с использованием ключевого слова let, называются переменными блочной области действия. Когда переменные блочной области действия объявляются вне функций, к ним можно получить глобальный доступ.

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

Давайте разберемся с помощью примера программы.

Пример 5:

<script>
  let p = 200; // accessible globally.
  function myFunction()
  {
   document.write(p+ "<br>");
   let q = 300; // accessible throughout the function.
   if(true)
   {
     document.write(q+ "<br>");
     let r = 400; // only accessible inside the block.
   }
  document.write(r);
 }
 myFunction(); // Calling function.
</script>

Output:
       200
       300
       Reference Error Exception

3. Если переменная объявлена ​​с ключевым словом const, значение которой не может быть переназначено, то она называется константной переменной или переменной только для чтения.

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

Пример 6:

<script>
  const p = 200; // accessible globally.
  function myFunction()
  {
   document.write(p+ "<br>");
   const q = 300; // accessible throughout the function.
   if(true)
   {
     document.write(q+ "<br>");
     const r = 400; // only accessible inside the block.
   }
   document.write(r); // ReferenceError Exception.
  }
myFunction();
</script>

Output:
       200
       300
       ReferenceError Exception

В табличной форме:

Переменный подъем

Подъем переменной — это переменная, к которой можно получить доступ до ее объявления.

1. Все переменные, объявленные с ключевым словом var, поднимаются. Это означает, что переменные, объявленные с ключевым словом var, поднимаются наверх области действия блока, где они определяются и к ним можно получить доступ до объявления.

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

<script>
  // Referenced before declaration.
       document.write(p); // Expected output: undefined.
       var p = 10;
</script>

2. Все переменные, созданные с помощью ключевого слова let, не подлежат подъему переменных. Это означает, что доступ к объявлению переменной с помощью ключевого слова let перед назначением вызовет исключение ReferenceError.

Посмотрите на приведенный ниже пример фрагмента кода.

<script>
// Referenced before declaration.
     document.write(p); // Expected ReferenceError because p is not defined.
     let p = 10;
</script>

3. Все переменные, объявленные с ключевым словом const, не поднимаются. Посмотрите на пример кода ниже.

<script>
// Referenced before declaration.
     document.write(language); // Expected ReferenceError because language is not defined.
     const language = "Javascript";
</script>

В табличной форме:

Переопределение переменной

Когда переменная объявляется с тем же именем, которое уже объявлено где-то в скрипте, это называется повторным объявлением переменной.

1. Используя ключевое слово var, мы можем объявить переменную с тем же именем, которое уже объявлено с использованием ключевого слова var в той же области действия.

Повторное объявление переменной с помощью var перезапишет переменную с тем же именем в той же области действия, но не перезапишет ее во внешней области действия.

Давайте разберемся с этим на примере программы, в которой мы переобъявим переменную с тем же именем, которое уже было объявлено.

Пример 7:

<script>
  var x = 1;
  var x = 2; // Redeclaration of variable with the same name.
  document.write(x+ "<br>");
  function myFunction()
  {
     var y = 3;
     var y = 4;
     document.write(y);
   }
 myFunction();
</script>

Output:
       2
       4

2. Повторное объявление переменной с использованием ключевого слова let, которая уже объявлена ​​с использованием ключевого слова let в той же области, вызовет исключение TypeError. Рассмотрим пример кода ниже.

Пример 8:

<script>
  let firstName = "John";
  let firstName = "Deep"; // TypeError
  document.write(firstName+ "<br>");
  function myFunction()
  {
     let lastName = "Mask";
     let lastName = "Sagar"; // TypeError
     document.write(lastName);
   }
 myFunction();
</script>

3. Повторное объявление переменной с использованием ключевого слова const, которая уже объявлена ​​с использованием ключевого слова const в той же области действия, также вызовет исключение TypeError. Рассмотрим приведенный ниже пример фрагмента кода.

<script>
   const language = "Javascript";
   const language = "Java"; // TypeError
   document.write(language+ "<br>");
  function myFunction()
  {
     const language2 = "HTML";
     const language2 = "Python"; // TypeError
     document.write(language2);
   }
   myFunction();
</script>

В табличной форме:

Разница между var, let и const в табличной форме

Чтобы понять разницу между ключевыми словами var, let и const в JavaScript, вкратце приведем ниже в табличной форме:

Надеюсь, что этот урок рассмотрел почти все важные моменты, связанные с разницей между ключевыми словами var, let и const в JavaScript с различными примерами. Надеюсь, вы поняли основную разницу между var, let и const. Спасибо за чтение!!!