Действительно ли нам нужно «Let», если у нас уже есть «Var»?

Что такое Вар?

Посмотрим, что говорит MDN:

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

Сфера? Что это?

Область действия определяет доступность переменных или других выражений. Чтобы узнать подробности о сфере действия проверьте эту ссылку.

Var имеет глобальную или функциональную область видимости

Глобальный означает, что если переменная объявлена ​​вне функции, она доступна для всех функций и скриптов на веб-странице или, другими словами, доступна для всего окна.

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

давайте посмотрим на пример:

var num = 9; // Global scope
function greeting(){
  var str = 'hey!!'; // Functional Scope
}

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

var num = 9;
function greeting(){
  var str = 'hey!!';
}
console.log(str); // ReferenceError: str is not defined

Большинство из нас знает это о Var, поэтому возникает вопрос: в чем реальная проблема с var?

Var может быть обновлен и объявлен повторно. т.е.

var num = 9;
num = 15;

Это разрешено в javascript, и, кстати, мы обновляли такие переменные много раз. в чем проблема?

var num = 9;
var num = 15;

Это также разрешено в той же области. Это проблема. Теперь представьте, что вы или кто-то уже объявили num с некоторым значением в других частях кода (но в той же области), если вы повторно объявите num по незнанию, оно будет переопределено, и могут появиться неожиданные ошибки. давайте посмотрим на этот пример

var num = 9;

if (true) {
    var num = 15; // num will get redefined to 15
}
    
console.log(num) // 15

«LET» спасает нас

Но прежде чем углубляться в «Let», давайте посмотрим, что говорит MDN:

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

Let is Block-scoped, что означает, что переменная , объявленная с помощью let внутри блока, доступна только в этом блоке.

Я знаю, что вы думаете. что такое блок в первую очередь?

Блок - это область кода, ограниченная фигурными скобками {}. Все, что находится внутри {}, представляет собой блок. мы обычно сталкиваемся с блоком с некоторыми условными операторами, такими как операторы if или циклы, но также разрешено использовать его автономно.

{
  let a = 10;
  let b = 20;
}

Это вполне допустимый блок. Что касается блочной области видимости let, посмотрите этот пример.

let a = 10;

if (true) {
    let b = 5;
    console.log(b); // 5
}
console.log(a); // 10
console.log(b) // ReferenceError: b is not defined

но в случае с Вар:

var a = 10;

if (true) {
    var b = 5;
    console.log(b); // 5
}
console.log(a); // 10
console.log(b) // 5

Поскольку let имеет блочную область видимости, переменная b недоступна за пределами области видимости, в которой она объявлена. Но в случае переменной Var, которая является глобальной или функциональной, доступ к переменной b осуществляется в пределах области, в которой она определена. Следовательно, ошибки нет.

Пусть можно обновить, но нельзя повторно объявить

Переменные, объявленные с помощью let, могут быть обновлены в пределах его области видимости. т.е.

let num = 20;
num = 20;

но повторное декларирование не допускается

let num = 10;
let num = 20; // Error: Identifier 'num' has already been declared

Поскольку num объявляется в одной и той же области дважды, возникает ошибка (var не показывает ошибку в том же случае, как обсуждалось выше). но обратите внимание, что одна и та же переменная может быть определена в разных областях без ошибок, что означает

let a = 20;
if (true) {
    let a = 30;
    console.log(a) // 30
}
console.log(a); // 20

Мы много рассказали о Вар и Лет. но осталась одна вещь

Подъем Var & Let

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

console.log(num);
var num = 10;
// Before execution. above code will get converted to
var num;
console.log(num); // undefined
num = 10;

Обе переменные Var и Let перемещаются вверх, но переменные с var инициализируются неопределенным значением, а переменная Let не инициализируется.

console.log(num); 
let num = 10;
// RefrenceError: Cannot access 'num' before initialization

Это все, что касается Вар против Лет. Ведь совершенно очевидно, что Let - это умный выбор в настоящее время.

Я буду публиковать больше таких блогов. Спасибо за чтение 😄.