Объем

Область действия – это набор правил, управляющих разрешением ссылок на переменные. Область действия связана с видимостью переменных в вашем коде — она определяет, где и какая переменная может использоваться. Каждая область может «заглядывать» в окружающую ее область. Область действия является статической и содержит фиксированный набор переменных, доступных в момент и в месте, где вы определяете функцию.

Области действия похожи на ведра, а переменные — на шарики, которые вы кладете в эти ведра.— Вы еще не знаете JS

JavaScript знает три типа области действия: глобальная область действия, область действия функции, область действия блока.

Глобальная область — это область, которая содержит все остальные области и отображается в них.

До ES6 область действия была единственной формой области действия в JavaScript; все объявления переменных и функций следовали правилам области действия функции. Область действия блока была введена в ES6 и используется только переменными, объявленными с помощью новых ключевых слов объявления переменных let и const.

Область действия в JavaScript создается внутри функций. При объявлении функции внутри тела этой функции создается новый блок области видимости. Доступ к переменным, объявленным внутри новой области действия функции, невозможен из родительской области; однако область функции имеет доступ к переменным в родительской области.

Родительская область — это блок кода, в котором определена функция. Это не блок кода, в котором вызывается функция.

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

Область действия блока в JavaScript создается с помощью фигурных скобок ({}). Пара фигурных скобок может быть помещена в любом месте кода, чтобы определить новый блок области видимости. Операторы if, циклы, функции и любые другие пары фигурных скобок будут иметь собственную область действия блока. Сюда входят плавающие фигурные скобки, не связанные с ключевым словом (if, for и т. д.).

Подъем

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

Вы можете думать о подъеме как о функции, основанной на двух «этапах» выполнения кода:

  • Этап компиляции (где также анализируется код)
  • Этап выполнения (затем выполняется код)

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

Декларация –› Инициализация/Назначение –› Использование

Подробнее:

Привязки

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

let myName = “Joe”

В этом предложении ключевое слово let указывает, что мы собираемся определить привязку. За ним следует имя привязки и, если мы хотим сразу присвоить ему значение, оператор = и выражение. Эта привязка называется (имя привязки)myName и используется для захвата и удержания строки Joe. Привязки не содержат значения, они захватывают их.

После определения привязки ее имя можно использовать в качестве выражения.

Если мы определим привязку, не давая ей значения, то нечего захватывать, поэтому мы получим значение undefined.

Системы JavaScript всегда добавляют в вашу среду ряд полезных стандартных привязок, например: alert() , console.log()

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

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

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

Подробнее:

var, пусть и const

Базовый JavaScript использует ключевое слово var для объявления переменных и

ECMAScript 6 (ES6/ES2015) представил ключевые слова let и const, которые поддерживают объявление локальных переменных области блока. Это означает, что переменная будет ограничена областью действия блока, в котором она определена, например, операторif или цикл for, и не будет доступна за пределами открывающей и закрывающей фигурных скобок блока. .

Это противоречит объявлениям var, которые доступны вне блоков, в которых они определены.

Разница между let и const заключается в том, что объявление const, как следует из названия, является константой — доступной только для чтения ссылкой на значение. Это не означает, что значение неизменно, просто идентификатор переменной нельзя переназначить.

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

Источники и многое другое:

Временная мертвая зона (TDZ)

Временная мертвая зона (TDZ) — это термин, описывающий состояние, в котором переменные недоступны. Они есть в области видимости, но не объявлены. И получаем ReferenceError. Переменные, объявленные let или const, имеют TDZ.

Переменные, объявленные с ключевыми словами let и const, имеют блочную область видимости. Когда переменная объявляется с областью действия блока, она НЕ имеет такого же подъема переменной, как переменные, созданные в области действия функции. Переменные с блочной областью не поднимаются в верхнюю часть области, и поэтому к ним нельзя получить доступ, пока они не будут объявлены. Это означает, что переменные, созданные с блочной областью, подчиняются временной мертвой зоне ( ТДЗ). TDZ — это период между вводом области действия и объявлением переменной. Он заканчивается, когда переменная объявляется, а не присваивается.

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

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

Если мы запустим этот код, мы получим ReferenceError. Почему? Когда мы объявляем переменную const x = 5 в области блока {}, мы создаем TDZ для x, который мы используем в console.log(x)

Больше примеров вы можете найти здесь.

Глобальный объект

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

ES6 ввел различие для глобального объекта JavaScript (window в браузерах, global в Node.js):

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

Окружения для различных переменных образуют следующую цепочку:

Module variables → Global variables → Global object

Объявления функций и объявления классов

Объявления функций:

  • имеют блочную область видимости, например let.
  • создавать свойства в глобальном объекте (находясь в глобальной области видимости), например var.
  • подняты: независимо от того, где объявление функции упоминается в его области видимости, оно всегда создается в начале области видимости.

Объявления классов:

  • имеют блочную область видимости.
  • не создавайте свойства для глобального объекта.
  • не поднимаются.