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

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

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

Глобальная переменная - это такая, которая объявлена вне тела какой-либо функции. Все глобальные переменные являются свойствами глобального объекта (в браузере – это window).

var car = "Audi";
console.log(window.car); // "Audi"

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

function myF() {
  car = "Audi"; // переменная car, созданная в функции без ключевого слова var
  var bus = "Volvo"; // переменная bus
}
// переменная car доступна вне функции
console.log(car); // "Audi"
console.log(window.car); // "Audi"
// переменная bus не доступна вне функции
console.log(bus); // ReferenceError: bus is not defined

Но это только справедливо не для строго режима. В строгом режиме необходимо обязательно объявлять переменные.

'use strict';
function myF() {
  car = "Audi";
}
console.log(car); // Uncaught ReferenceError: car is not defined
// глобальная переменная browser не объявлена
browser = "Firefox"; // Uncaught ReferenceError: car is not defined

К глобальной переменной можно обратиться внутри функции.

'use strict';
var car = "Audi"; // глобальная переменная car
function myF() {
  console.log(car); // получение значения глобальной переменной
}
myF(); // "Audi"

// глобальная переменная 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);