Ключевое слово let в JavaScript

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

Ключевое слово JavaScript let соответствует тому же определению, что и var, за одним исключением, что оно привязано к области блока, а не к области функции. То есть переменная, определенная с помощью ключевого слова let, видна только в той области, в которой она определена.

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

let language = 'JavaScript'; // Declare and initialize a variable.
Or,
let language; // Declare a variable.
language = 'JavaScript'; // Initialize a variable.

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

let x, y, z; // Declaration of 3 variables.
let num = 20, char = 'A'; // Declaration and initialization of 2 variables.

Ключевое слово Let было введено в ECMAScript 6 (ES6), что является новой стандартной функцией JavaScript.

Зачем нам нужно ключевое слово Let в JavaScript?

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

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

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

Пример 1:

<script>
 var x = 10; // accessible globally.
// Create a function named myFunction.
  function myFunction()
  {
    document.write(x +"<br>");
    var y = 20; // accessible throughout the function.
    if(true)
    {
      var z = 30; // accessible throughout the function.
      document.write(y+ "<br>");
    }
     document.write(z);
  }
 myFunction(); // Calling function.
</script>

Вывод:
 10
 20
 30

Как вы видите в приведенном выше коде скрипта, переменная z является локальной переменной внутри инструкции if. Переменная z по-прежнему доступна после завершения выполнения инструкции if.

Чтобы преодолеть эту проблему, JavaScript ввел ключевое слово let в ES6, которое мы можем использовать для создания переменных с блочной областью действия. В приведенном выше коде скрипта, если мы используем let вместо var, переменная z не будет видна (доступна) после завершения цикла.

Блокируйте переменные с ограниченной областью действия в JavaScript (Let Keyword Scope в JavaScript)

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

Блок — это группа из нуля или более операторов в Javascript, которая создается с помощью фигурных скобок ({....}). Пару фигурных скобок можно поместить в любом месте скрипта, чтобы определить новую область действия блока.

Переменные в области блоков работают так же, как переменные в области функций, когда они объявлены вне функции, доступ к ним осуществляется глобально. Но когда переменные, охватываемые блоком, определены внутри блока, они доступны только внутри блока, в котором они определены, но не вне функции.

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

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

Пример 2:

<script>
let x = 20; // accessible globally.
// Create a function named myFunction.
  function myFunction()
  {
    document.write(x+ "<br>");
    let y = 30; // accessible throughout the function.
    if(true)
    {
      let z = 40; // accessible only inside if statement.
      document.write(y+ "<br>");
    }
   document.write(z); // Reference Error Exception.
  }
  myFunction(); // Calling function.
</script>

Вывод:
 20
 30
 Исключение ошибки ссылки

Если вы будете выполнять приведенный выше код скрипта, последний оператор «document.write(z);» выдаст ошибку, потому что определение z удаляется, как только завершается цикл оператора if. Другими словами, переменная z недоступна вне блока оператора if.

Давайте рассмотрим еще один простой пример программы, основанной на нем.

Пример 3:

<script>
 for(var x = 1; x < 5; x++)
 {
   document.write(x+ ""); // Output: 1 2 3 4
 }
 document.write(x); // Output: 5 because variable x is accessible here.
 for(let y = 1; y < 10; y++)
 {
   document.write(y+ ""); // Output: 1 2 3 4
 }
 document.write(y); // Error! y is undefined because variable y is not accessible outside for loop.
</script>

Как вы можете видеть в приведенном выше коде скрипта, переменная y, объявленная с помощью ключевого слова let, доступна внутри цикла for, но не вне цикла for.

Повторное объявление переменных в Javascript

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

Пример 4:

<script>
var city = "Ranchi";
var city = "Dhanbad" // redeclaration of a variable.
document.write("Name of city: " +city+ "<br>");

function myFunction()
{
    var city = 'Mumbai';
    var city = 'New York'; // redeclaration of variable.
    document.write("Name of city: " +city);
}
myFunction(); // Calling function.
</script>

Вывод:
 Название города: Дханбад
 Название города: Нью-Йорк

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

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

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

Пример 5:

<script>
let x = 20;
let x = 40; // TypeError because of redeclaration.
document.write("Value of x: "+x+ "<br>");
  
function myFunction()
{
   let y = 100;
   let y = 200; // TypeError
   document.write("Value of y: " +y+ "<br>");
}
myFunction(); // Calling function.
</script>

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

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

Пример 6:

<script>
var x = 20;
let y = 30;
function myFunction()
{
   var x = 40; // Different variable because of different block scope.
   let y = 50; // Different variable because of different block scope.
   if(true)
   {
       var x = 60; // Overwritten because of the same block scope.
       let y = 70; // Different variable because of the different block scope.
       document.write(x+ "<br>");
       document.write(y+"<br>");
    }
   document.write(x+ "<br>");
   document.write(y+ "<br>");
 }
myFunction(); // Calling function.
document.write(x+ "<br>");
document.write(y);
</script>

Вывод:
 60
 70
 60
 50
 20
 30

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

Возможность изменять или переназначать значение переменной в любое время называется переназначением переменной в JavaScript. Существует два способа переназначения значения переменной, которые заключаются в следующем:

• Использование ключевого слова var
• Использование ключевого слова let

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

Пример 7:

<script>
// Declared and assigned using var.
   var name = 'John';
   document.write('Name: ', name, '<br>');
// Value reassigned.
   name = 'Ivaan';
   document.write('Reassigned name: ', name, '<br>');

  {
  // Declared and assigned using let.
     let city = 'New York';
     document.write('City: ', city, '<br>');
  // Value reassigned.
     city = 'Dhanbad';
     document.write('Reassigned city: ', city)
  }
</script>

Выходные данные:
 Имя: Джон
 Переназначенное имя: Иваан
 Город: Нью-Йорк
 Переназначенный город: Дханбад

Перемещение переменных в JavaScript

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

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

Пример 8:

<script>
      document.write(x); // Accessing before declaration and initialization.
      var x = 20;
</script>

Вывод:
 Не определено

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

Рассмотрим приведенный ниже пример кода скрипта, в котором переменная, определенная с помощью ключевого слова let, не поднята.

Пример 9:

<script>
document.write(x); // Accessing before declaration and initialization.
let x = 20;
</script>

Вывод:
 Ошибка ссылки: не удается получить доступ к 'x' перед инициализацией

Преимущество использования ключевого слова Let

Есть несколько преимуществ использования ключевого слова let при объявлении переменных. Они заключаются в следующем:

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

Var vs. Let, что следует использовать?

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

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