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

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

Переменные могут иметь локальную или глобальную область видимости.

Локальная область видимости (уровня функции)

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

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

Пример области видимости уровня функции:

 
var name = "John";

function showName() {
var name = "Jack"; // локальная переменная, доступна только внутри функции
    console.log(name); // Jack
}
console.log(name); // глобальная переменная
 

Пример области видимости уровня блока:

 
var name = "John";
// блок if не создает локальной области видимости
if (name) { 
    name = "Jack"; // глобальная переменная
    console.log(name);
}
console.log(name); // Jack
 

Всегда объявляйте локальные переменные

Всегда объявляйте локальные переменные перед их использованием. На самом деле, если вы используете JSHint, он должен сообщить вам о синтаксической ошибке, если переменная не была объявлена. Проблема необъявленных переменных показана примере ниже:

 
/* если вы не объявляете локальную переменную с помощью ключевого слова var, она получает глобальную область видимости */
var name = "Michael Jackson";

function showCelebrityName() {
    console.log(name);
}

function showOrdinaryPersonName() {
    name = "Johnny Evers";
    console.log(name);
}
showCelebrityName(); // Michael Jackson

// переменная name не была объявлена в функции, поэтому она изменяет глобальную
showOrdinaryPersonName(); // Johnny Evers
showCelebrityName(); // Johnny Evers

/* Решением данной проблемы будет объявление локальной переменной с помощью ключевого слова var */
function showOrdinaryPersonName() {
    var name = "Johnny Evers";
    console.log(name);
}
  

Локальные переменные имеют больший приоритет, чем глобальные

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

  
var name = "Paul";
function users() {
    var name = "Jack";
    console.log(name);
}
users(); // Jack
 

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

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

  
// примеры объявления глобальных переменных:
var myName = "Richard";

// или
firstName = "Richard";

// или
var name; 

/* доступ к глобальной переменной можно получить также через объект window */
console.log(window.myName); // Richard;
console.log("myName" in window); // true
console.log("firstName" in window); // true
  

Переменная, инициализированная без ключевого слова var, также имеет в глобальную область видимости:

  
function showAge() {
    age = 90;
    console.log(age);
}
showAge();
console.log(age); // 90
  

Подъем переменных

Если переменная определена внутри функции, она поднимается к верхней части функции, если глобально — к верхней части глобального контекста. При этом поднимается только объявление функции без инициализации. Рассмотрим, что это значит на примере:

 
var name = "Ford";

function showName() {
    console.log("First Name: " + name);
    var name = "Ford";
    console.log("Last Name: " + name);
}
showName(); 

// First Name: undefined
// Last Name: Ford

/* Объявление переменной name поднимается вверх без присваивания, перекрывая глобальную переменную, поэтому в первом случае значение переменной name - undefined */