Не путайте с затенением в JavaScript. Чтобы понять затенение, сначала давайте разберемся, что такое Scope в Javascript. Scope — это определенная область или граница кода. В JavaScript Блок представляет собой группу с фигурными скобками {}

{
   var a = 20;
   let b = 30;
   const c = 40;
}

Да, это блок, но зачем мне его использовать? Подождите, посмотрите, в приведенном выше примере объявлено три типа переменных: var, let и const.

когда вы создаете переменную с ключевым словом var, вы фактически создаете ее в Global Scope или в Window Object JavaScript.

console.log(window.a) // 20

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

Теперь, что если у нас есть такая же переменная за пределами этой области,

var a = 50;
{
  var a = 20;
  let b = 30;
  const c = 40;
}
console.log(a);
console.log(b);
console.log(c);

каков будет вывод приведенного выше примера? Ответ: 20, странно….😆

Что здесь произошло, на самом деле, когда вы объявили переменную с ключевым словом var и внутри блока вы фактически обновляете переменную a той же ссылки на переменную, но переменные b и c находятся за пределами этой заблокированной области, поэтому она будет генерировать a Ошибка ссылки: b не определен

Теперь давайте возьмем другой пример:

var a = 50;
let b = 100;
const c = 150;
{
  var a = 20;
  let b = 30;
  const c = 40;
  console.log(a); // 20
  console.log(b); // 30
  console.log(c); // 40
}
console.log(a); // 20
console.log(b); // 100
console.log(c); // 150

В это время вы увидите 20 для a, 100 для b и 150 для c, правильно. но почему он не обновился с b = 30 и c = 40? Ответ: пусть, а константные переменные заблокированы, и они создают отдельную память для каждой переменной,

Незаконная слежка

Что произойдет, если вы попытаетесь скрыть переменную let с помощью переменной var, посмотрим.

var a = 50;
let b = 100;
const c = 150;
{
  var a = 20;
  var b = 30;
  const c = 40;
  console.log(a); // 20
  console.log(b); // 30
  console.log(c); // 40
}
console.log(a); // 20
console.log(b); // 100
console.log(c); // 150

Это вызовет Uncaught SyntaxError:Идентификатор "b" уже объявленно почему? Из-за области действия переменной var.😊😊

В приведенном выше примере мы создаем нелегальное затенение.

Переменная var доступна за пределами этой области, и это то же самое, что и без области, таким образом, вы фактически создаете две переменные, первая — let, а вторая — с var ✔✔ и вы получаете синтаксическую ошибку 🎃🎃🎃

Заключение

В итоге затенение JavaScript позволяет нам создавать программы с собственной областью действия. Введение let и const в ECMAScript 6 вместе с областью действия блока позволяет затенение переменных.

Если вам понравился этот пост, не забудьте поставить мне👏ниже⏬️ .Это, несомненно, сильно меня мотивирует 😊. Спасибо