Разница между «Var, Let & Const» и концепцией «Временная мертвая зона и подъем»

Привет! Давайте обсудим наиболее распространенный вопрос и ответ на js. Вы все уже знаете, что Var имеет глобальную область видимости, а Let и const - только блочную.

Но……..?

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

Давайте обсудим это подробнее. Чтобы понять разницу между Var, let и const, нам нужно знать, как javascript компилирует код.

Давайте разберемся с этим простым кодом.

Js-движок считывает весь код, берет все переменные, выделяет для них память и присваивает им значение undefined и размещает их все в верхней части среды. Это называется Подъем. (Js также выполняет функции хоста)

Давайте переместим оба журнала консоли в начало объявления ...

Теперь a все еще не определено, но для b выдает ошибку, в которой просто говорится, что мы не можем получить доступ к b до инициализации, но он где-то объявлен, но мы можем получить к нему доступ, пока не дадим ему какое-либо значение.

Поэтому, когда js размещает переменные во время подъема, только JS-переменные хоста, объявленные с помощью ключевого слова var в глобальном context или scope, но переменная, объявленная с помощью let или const, размещена в другой частной области, которая недоступна для глобальной области, и становится доступной только тогда, когда мы присваиваем ей значение.

Итак, давайте присвоим значение обеим переменным.

a будет неопределенным, а для строк 2 и 4 мы получим ту же ошибку, которую нельзя использовать до инициализации. Но в строке 6 мы видим, что значение b будет 0. так что до строки номер 4 мы не можем получить доступ к b, но после этого мы можем получить к нему доступ.

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

========================================

Это была единственная точка зрения Лет и Вар. Давайте посмотрим, что произойдет, когда мы будем использовать обе функции внутри функции, как работает наиболее распространенное определение области видимости блока.

Когда мы используем var и let внутри любого блока (block означает между {. ..Code…}), они оба работают по-разному, в зависимости от фактора, в котором мы его объявляем.

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

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

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

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

Тогда какова реальная концепция области видимости блока ?? Почему все говорят, что var имеет глобальную область видимости, а давайте - нет?

Попробуем выяснить это на еще одном примере.

Обе функции являются простыми для печати значений от 0 до 4 с использованием цикла for, но с простой разницей в объявлении переменной «i» с помощью var и let. но результат обоих будет отличаться из-за концепции области видимости блока. Давайте сначала проверим вывод.

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

Если мы объявим переменные вне оператора цикла for, то обе будут работать так же, как и раньше. Так в чем разница ???? 🤔🤔🤔🤔

Настоящая разница в том, что когда мы объявляем любую переменную с помощью let, она не будет доступна для ее родительской области (которая равна {….}), но для var она переходит в глобальную или родительскую область, а когда мы находимся внутри функции global Область действия функции такая же, как и область действия функции, которая находится от начала функции до конца функции (контекст выполнения функции).

Давайте посмотрим на еще несколько примеров, чтобы лучше понять это.

мы только меняем цикл for на {} и можем наблюдать то же поведение. Итак, речь не идет о цикле for и других операторах. Речь идет об области видимости, которая определяется {}, и да, для var она принимает родительскую область, а не только родительскую, она берет всю область видимости функции и объявляет переменную наверху в области видимости функции, и пусть она состоит только из своей собственной области.

Давайте посмотрим на примере, чтобы объяснить приведенные выше строки

========================================

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

Const работает так же, как let, но с той лишь разницей, что мы не можем повторно инициализировать его.

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

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

Существует так много вещей, связанных с подъемом и объявлением ключевого слова на основе множества различных ситуаций, таких как внутри setTimeout, IIFE и многих других, но базовая концепция для всех останется той же основой для всех трех вышеупомянутых концепций с их собственными концепциями, такими как цикл событий , инкапсуляция и многое другое, но концепция var и let останется прежней. Давайте обсудим это в другом посте.

Если у вас есть какие-либо вопросы, как всегда, обращайтесь через Linkedin ❤

Дополнительная информация: - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Спасибо