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

Глобальный охват

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

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

let x = 10;

function foo() {
  console.log(x);
 }

foo();

В этом коде переменная x объявлена ​​в глобальной области видимости. Функция foo также объявлена ​​в глобальной области видимости, поэтому она имеет доступ к переменной x и записывает ее значение в консоль. Когда мы вызываем foo, он регистрирует значение x, которое равно 10.

Объем функций

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

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

function foo() {
let x = 10;
console.log(x);
}

foo();
console.log(x);
// ReferenceError: x is not defined

В этом коде переменная x объявлена ​​внутри функции foo, meaning, она только доступна внутри этой функции. Когда мы вызываем foo, он регистрирует значение x, которое равно 10. Однако, если мы попытаемся зарегистрировать значение x вне функции, мы получим ошибку ссылки, поскольку x не определено в глобальной области видимости.

Область блока

Область блока относится к области, создаваемой каждый раз, когда код записывается внутри блока кода. В JavaScript блок создается путем написания кода внутри фигурных скобок {}. Любые переменные, объявленные внутри блока, доступны только внутри этого блока. Как и область действия функции, это полезно для организации вашего кода и предотвращения конфликтов имен с переменными, которые объявлены в других частях вашего кода.

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

if (true) {
  let x = 10;
  console.log(x)
}

console.log(x);
// ReferenceError: x is not defined

В этом коде переменная x объявляется внутри блока операторов if. Это означает, что он доступен только в этом блоке кода. Когда мы запустим этот код, он запишет значение x, то есть 10. Однако, если мы попытаемся зарегистрировать значение x за пределами блока кода, мы получим ошибку ссылки, поскольку x не определено в глобальной области видимости.

Важно понимать, что внутри области блока только переменные, объявленные с помощью const и let, относятся к области блока. Любые переменные, объявленные с помощью var, не относятся к блоку.

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

if (true) {
var x = 10;
}

console.log(x)

В этом коде эта переменная x объявляется внутри блока операторов if с использованием var. Это означает, что x также будет доступен за пределами этого блока кода в глобальной области видимости. Когда мы регистрируем значение x вне блока кода, оно регистрирует значение x, то есть 10.

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

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

if (true) {
x = 10;
}

console.log(x)

Хотя x объявлен внутри блока операторов if в этом коде, он был объявлен без использования const, let или var. Это означает, что когда мы регистрируем значение x вне блока кода, оно будетдоступно в глобальной области видимости.

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