Javascript - перераспределение переменных в подблоке // Затенение переменных

Question

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

пусть - JavaScript | MDN говорит:

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

Если мы попробуем это, он будет работать нормально, как и ожидалось:

function letTest() {
  let x = 1;

  for(var i = 0; i < 1; i++) {
    console.log(x);  // logs - 1
  }
}

Другой пример. Теперь я использую for подблок для назначения нового значения let переменная 0 и пройти через for петля. Это также работает, как и ожидалось.

function letTest() {
  let x = 5;
  console.log(x);  // logs – 5

  for( x = 0; x < 12; x++) {
    console.log(x);  // logs – 0, 1, 2, 3, 4, 5, 6, … 10, 11
  }

  console.log(x);  // logs - 12
}

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

function letTest() {
  let x = 5;
  console.log(x);  // logs – 5

  for( let x = 0; x < 12; x++) {
    console.log(x);  // logs – 1, 2, 3, 4, 5, 6, … 10, 11
  }

  console.log(x);  // logs - 5
}

Какой механизм здесь на работе и что именно произошло?

Почему ценность let x = 5 не изменилось, почему там сейчас 2 let переменные с тем же именем?

Answer 1

Я думаю, что нашел ответ здесь:

Демистификация JavaScript переменной области и подъем

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

и здесь тоже:

/questions/5270976/primer-zateneniya-peremennyih-v-javascript/5270981#5270981

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

Answer 2

Я удалил свой предыдущий ответ, потому что я неправильно понял ваш вопрос.

Попробуйте запустить следующие функции в вашем браузере (предпочтительно, инструменты chrome dev):

function letTest() {
   debugger;
   for(var i=0; i<2; i++) {
     //some code here
   }
}

На этапе отладчика var будет отображаться как 'i=undefined', даже если он изначально определен в цикле for. Это потому, что он ограничен контекстом выполнения, который в данном случае является функцией letTest. Так как он доступен здесь, он также будет доступен после блока for-loop.

function letTest() {
   debugger;
   for(let i=0; i<2; i++) {
     //some code here
   }
}

На этапе отладчика i недоступен, поскольку он ограничен блоком (и его подблоками), который является циклом for.

function letTest() {
   let i=100
   for(i=0; i<2; i++) {
     //some code here
   }
}

Так как let доступен в его собственном блоке и субблоках (который был бы для цикла for), его начальное значение изменяется с 100 на 0, а затем на 2 после завершения цикла for.

function letTest() {
   let i=100
   for(let i=0; i<2; i++) {
     //some code here
   }
}

Поскольку вы переделываете значение let в блоке, здесь 'i' будет иметь область видимости блока, как показано во втором примере выше. Поскольку он имеет область видимости блока, он недоступен за пределами блока.

Answer 3

Оператор let создает переменную области видимости блока.

function letTest() {
  let x = 5;
  console.log(x);  // x = 5 (same 'x')

  for(let x = 0; x < 12; x++) {
    console.log(x);  // x = 1, 2, …, 10, 11 (different 'x')
  }

  console.log(x);  // x - 5 (same 'x')
}

в то время как оператор var создает переменную области видимости функции.

function varTest() {
  var x = 5;
  console.log(x);  // x = 5

  for(var x = 0; x < 12; x++) {
    console.log(x);  // x = 1, 2, …, 10, 11
  }

  console.log(x);  // x = 12 ('x' from the for-loop)
}