Область действия глобальной и локальной переменной

В этой статье вы узнаете об области видимости и о том, как она работает в JavaScript.

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

Область применения может помочь вам:

  • Используйте память более эффективно. Область видимости позволяет загружать переменные только при необходимости. Если переменная выходит за пределы области видимости, вам не нужно делать ее доступной для кода, который в данный момент выполняется.
  • Облегчается поиск и исправление ошибок. Изоляция переменных с локальной областью упрощает устранение ошибок в коде, поскольку, в отличие от глобальных переменных, вы можете быть уверены, что код из внешней области не сможет манипулировать переменными с локальной областью.
  • Создавайте небольшие блоки многократно используемого кода. Например, вы можете написать чистую функцию , которая не зависит от внешней области видимости. Вы можете легко переместить такую ​​функцию в другое место с минимальными изменениями.

Что такое масштаб?

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

JavaScript определяет переменные глобальной или локальной области действия:

  • Переменные с глобальной областью действия доступны из всех других областей действия кода JavaScript.
  • Переменные с локальной областью действия доступны только в определенном локальном контексте и создаются с помощью ключевых слов, таких как var , let и const . Если вы используете ключевые слова var , let или const для создания переменной внутри функции, эта переменная имеет локальную область видимости.

В последующих разделах этой статьи обсуждаются блоки и лексическая область действия:

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

Когда к переменной осуществляется доступ в пределах ее области действия, JavaScript возвращает присвоенное ей значение или иным образом выдает ошибку.

Чтобы объявить переменную:

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

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

Примеры области применения

Этот пример демонстрирует глобальную область видимости, поскольку greeting объявляется вне какой-либо функции или блока, что делает ее значение доступным для всего кода в текущем документе:

const greeting = 'hello';
console.log(greeting); // 'hello'

В примере глобальной области переменной greeting присваивается значение hello .

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

function greet() {
  let greeting = 'Hello World!';
  console.log(greeting);
}

В этом примере демонстрируется область действия блока, поскольку переменная greeting объявляется внутри блока, поэтому переменная доступна только внутри фигурных скобок:

if (true) {
   const greeting = 'hello';
}

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

Обратите внимание: когда функция console.log пытается вывести значение переменной greeting , JavaScript возвращает сообщение об ошибке ReferenceError вместо ожидаемого сообщения hello . Почему?

Возвращается ошибка, поскольку переменная greeting имеет область действия блока, а ближайший блок является частью условного оператора if . Вы не можете получить доступ к переменным let и const , объявленным внутри блока, снаружи блока. Таким образом, вы можете получить доступ только к переменной greeting в фигурных скобках, которая определяет область действия блока.

В этом примере ошибка исправлена, поскольку метод console.log(message) перемещается внутри фигурных скобок. Обновленный код перемещает метод console.log(message) внутри блока.

if (true) {
   const greeting = 'hello';
   console.log(greeting);
}

Типы области применения

Глобальная область действия

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

Рассмотрим HTML-файл, который импортирует два файла JavaScript: file-1.js и file-2.js :

<script src="file-1.js"></script>
<script src="file-2.js"></script>

В этом примере переменная globalMessage имеет глобальную область действия и записана вне функции. Во время запуска и выполнения вы можете получить доступ к значению переменной globalMessage из любого места программы JavaScript.

Вы можете увидеть содержимое файлов file-1.js и file-2.js в этом фрагменте кода. Обратите внимание на наличие переменной globalMessage в обоих файлах.

// file-1.js
function hello() {
    var localMessage = 'Hello!';
}

var globalMessage = 'Hey there!';

// file-2.js
console.log(localMessage); // localMessage is not defined
console.log(globalMessage); // Hey there!

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

Локальная область и область действия функции

Когда вы создаете переменные в функции JavaScript с ключевыми словами var , let или const , переменные являются локальными для функции, поэтому вы можете получить к ним доступ только изнутри функции. Локальные переменные создаются при запуске функции и фактически удаляются после завершения выполнения функции.

В этом примере объявляется переменная total в функции addNumbers() . Вы можете получить доступ только к переменным a , b, и total внутри функции addNumbers() .

function addNumbers(a, b) {
    const total = a + b;
}

addNumbers(3, 4);

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

var variable1 = 'Declared with var';
var variable1 = 'Redeclared with var';
variable1; // Redeclared with var

let variable2 = 'Declared with let. Cannot be redeclared.';
variable2 = 'let cannot be redeclared, but can be updated';
variable2; // let cannot be redeclared, but can be updated

const variable3 = 'Declared with const. Cannot be redeclared or updated';
variable3; // Declared with const. Cannot be redeclared or updated

Область действия блока

Блоки используются для группировки одного оператора или набора операторов вместе. Вы можете использовать ключевые слова const или let для объявления локальной переменной области блока. Обратите внимание, что вы не можете использовать ключевое слово var для объявления переменных с областью действия блока.

Например, в этом блоке область действия переменной name и ее значения "Elizabeth" заключены в фигурные скобки. Переменные внутри области блока недоступны за пределами блока.

{
    const name = "Elizabeth";
}

Вы можете использовать переменные с областью действия блока внутри операторов if , for или while .

Обратите внимание на два цикла for в этом фрагменте кода. Один цикл for использует ключевое слово var для объявления переменной инициализатора, которая увеличивается на числа 0 , 1 и 2 . Другой цикл for использует ключевое слово let для объявления переменной инициализатора. 

for (var i = 0; i < 2; i++) {
    // ...
}

console.log(i); // 2

for (let j = 0; j < 2; j++) {
    // ...
}

console.log(j); // The j variable isn't defined.

В предыдущем примере кода вы можете заметить, что переменная i в первом цикле for вышла за пределы цикла for и по-прежнему сохраняет значение 2 , поскольку ключевое слово var не использует область действия блока. Проблема устранена во втором цикле for , в котором переменная j , объявленная с ключевым словом let , ограничена блоком цикла for и не существует после завершения цикла for .

Повторное использование имени переменной в другой области действия

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

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

function listOne() {
    let listItems = 10;
    console.log(listItems); // 10
}

function listTwo() {
   let listItems = 20;
   console.log(listItems); // 20
}

listOne();
listTwo();

Переменным listItems в функциях listOne() и listTwo() присваиваются ожидаемые значения, поэтому они не конфликтуют друг с другом.

Замыкания и лексическая область видимости

Замыкания относятся к закрытой функции, в которой внутренняя функция может получить доступ к внешней области функции, которая также известна как лексическая среда. Таким образом, в JavaScript вы используете замыкания, чтобы позволить функциям ссылаться на внешнюю лексическую среду, что позволяет коду внутри функции ссылаться на переменные, объявленные вне функции. Фактически, вы можете закодировать цепочку ссылок на внешние лексические окружения так, чтобы функция вызывалась функцией, которая, в свою очередь, вызывается другой функцией.

В этом примере код образует замыкание с лексической средой, созданной при вызове функции outer() , которая закрывается по переменной hello . Таким образом, переменная hello используется в функции обратного вызова setTimeout . 

function outer() {
    const hello = 'world';

    setTimeout(function () {
        console.log('Within the closure!', hello)
    }, 100);
}

outer();

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

Модули

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

// hello.js file
function hello() {
  return 'Hello world!';
}

export { hello };

// app.js file
import { hello } from './hello.js';

console.log(hello()); // Hello world!

Демонстрация визуализатора области видимости

Область действия — это фундаментальная концепция, которую должен понимать каждый разработчик JavaScript. Чтобы лучше понять систему областей видимости, вы можете попробовать написать собственный код с помощью JS Scope Visualizer . В демонстрации используется раскраска кода, которая помогает визуализировать области JavaScript.

Заключение

В этой статье представлены различные типы областей. Область действия JavaScript — одна из наиболее сложных концепций веб-разработки, поэтому здорово, что вы прочитали этот контент и нашли время, чтобы понять эту тему.

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