JavaScript - Локальные и глобальные переменные

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

Глобальные переменные

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

// глобальная переменная numberUsers
var numberUsers=0;
// функция, при вызове которой изменяется значение глобальной переменной numberUsers
function getUsers1() {
  numberUsers=5;  // присвоим значение 5 глобальной переменной numberUsers 
  return numberUsers;  // вернём в качестве результата функции значение глобальной переменной 
}
// функция, при вызове которой изменяется значение глобальной переменной numberUsers
function getUsers2() {
  numberUsers+=10;  // увеличим значение на 10 глобальной переменной numberUsers 
  return numberUsers;
}
//вызовем функцию getUser1(), которая вернёт значение глобальной переменной numberUsers
console.log("numberUsers (getUser1) = "+getUsers1());
// вызовем функцию getUser2(), которая возвратит значение глобальной переменной numberUsers
console.log ("numberUsers (getUser2) = "+getUsers2());
//выведем значения глобальной переменной numberUsers
console.log ("numberUsers = "+numberUsers);

Локальные переменные

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

function getViews() {
  // локальная переменная, созданная внутри функции getViews и не доступная за её пределами
  var numberViews = 37;
  // вернём в качестве результата данной функции значение локальной переменной numberViews
  return numberViews;
}
// вызов функции getViews, которая вернёт значение переменной numberViews
console.log("Функция getViews вернула значение: "+ getViews());
// попробуем получить значение переменной вне функции
console.log("Значение переменной numberViews: "+ numberViews);

Основные моменты при работе с переменными в JavaScript

Перечислим некоторые моменты, которые необходимо учитывать при работе с переменными:

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

Рассмотрим небольшой пример, в котором увидим, как будут ввести себя локальные и глобальные переменные, имеющие одно и то же имя:

// создание глобальной переменной numberUsers и её инициализация числом 0
var numberUsers=0; 
function getUsers1()  {
  // создание локальной переменной numberUsers внутри функции getUsers1
  var numberUsers;
  // изменение значения локальной переменной numberUsers
  numberUsers=5;
  // вернём в качестве результата значение локальной переменной numberUsers 
  return numberUsers;
}
function getUsers2() {
  // создание локальной переменной numberUsers в функции getUsers2
  var numberUsers;
  // изменение значения локальной переменной numberUsers на значение 10
  numberUsers+=10;
  return numberUsers;
}
// вызовем функцию getUser1, которая вернёт значение переменной numberUsers, созданной в этой функции
console.log("numberUsers (getUser1) = "+getUsers1());
// вызовем функцию getUser2, которая вернёт значение переменной numberUsers, созданной в этой функции
console.log("numberUsers (getUser2) = "+getUsers2());
// выведем в консоль значение глобальной переменной numberUsers
console.log("numberUsers = "+numberUsers);