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);

Комментарии ()