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

Содержание:
  1. Глобальные переменные
  2. Локальные переменные
  3. Жизненный цикл переменных
  4. Основные правила работы с переменными
  5. Комментарии

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

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

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

// глобальная переменная сar
let car = 'Audi';

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

Доступ к глобальной переменной year внутри myFunc():

// глобальные переменные car и year
let car = 'Audi';
let year = 2007;
function myFunc() {
  // локальная переменная car
  let car = 'Ford';
  console.log(car); // "Ford"
  console.log(year); // 2007
}
myFunc(); // "Audi"

Внутри функции myFunc() мы не сможем получить доступ к глобальной переменной car после объявления переменной с таким же именем внутри этой функции.

Ещё один пример:

// глобальная переменная numberUsers
let numberUsers = 0;
// объявление функции addUsers
const addUsers = (num) => {
  numberUsers += num;
  return numberUsers;
}

console.log(addUsers(5)); // 5
console.log(addUsers(2)); // 7
console.log(numberUsers); // 7

В это примере мы нарушили одно из ключевых правил: поменяли внутри функции значение внешней переменной. Это делать крайне не рекомендуется.

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

Локальные переменные – это такие, которые объявлены в локальной области видимости. Например, внутри блока {...}:

{
  // количество просмотров
  let totalViews = 10;
}

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

{
  // количество просмотров
  let totalViews = 10;
}
console.log(totalViews); // Uncaught ReferenceError: totalViews is not defined

Локальные переменные с одними и теми же именами могут использоваться в разных блоках:

if (true) {
  let pageTitle = 'Учебник по JavaScript';
  console.log(pageTitle); // "Учебник по JavaScript"
}
if (!false) {
  let pageTitle = 'Учебник по CSS';
  console.log(pageTitle); // "Учебник по CSS"
}

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

if (true) {
  // количество просмотров
  let totalViews = 10;
  let addViews = () => {
    totalViews++;
    return totalViews;
  }
  if (totalViews) {
    addViews();
    console.log(totalViews); // 11
  }
}

Жизненный цикл переменных

Рассмотрим жизненный цикл переменных a и b на следующем примере:

let a = 7;
let b;
const someFunc = () => {
  let b;
  a = null;
  b = 5;
  console.log(b);
}
someFunc();
console.log(a);
console.log(b);

В этом примере мы объявили переменным a, b и someFunc в глобальной области видимости. Следовательно, эти переменные являются глобальными.

Переменной someFunc мы присвоили функциональное выражение. Далее мы вызвали эту функцию, используя данную переменную.

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

При этом новая локальная область будет создаваться каждый при вызове someFunc().

Жизненный цикл переменной a

1. Сначала переменная a объявляется в глобальной области видимости и ей сразу же с помощью оператора = присваивается число 7.

2. Вызов someFunc() создаёт локальную область видимости функции, которая содержит ссылку на глобальную область видимости. Здесь мы пытаемся присвоить переменной a значение null. Т.к. a в этой области нет, то мы переходим по ссылке к внешней области видимости, которая в данном случае является глобальной, и ищем переменную здесь. Здесь мы её находим и присваиваем ей новое значение, т.е. null.

Таким образом после выполнения этой строчки глобальная переменная a будет иметь значение null. Т.е. мы поменяли значение внешней переменной внутри функции.

3. После выполнения функции someFunc она возвращает значение undefined. Все локальные переменные, которые были созданы внутри неё больше не доступны и сборщик мусора их удаляет.

На следующем шаге, когда мы пытаемся вывести значение переменной a в консоль, интерпретатор находит её в текущей области видимости, которая является глобальной. При этом значение переменной уже не 7, а null. Значение a мы изменили внутри функции.

Жизненный цикл переменной b

1. Переменная с именем b создаётся в глобальной области видимости. На этом шаге её значение undefined, т.к. ей не было присвоено значение.

2. При вызове функции someFunc() создаётся локальная область. В ней объявляется переменная b посредством let.

3. Затем на строке b = 5 хотим присвоить переменной b число 5. Но сначала необходимо найти переменную b. Поиск переменной всегда начинается с текущей области видимости. В ней она есть. Следовательно берем её и присваиваем ей значение 5. Т.е. мы присвоили значение локальной переменной, не глобальной.

4. На следующем шаге (console.log(b)) мы хотим вывести значение переменной b в консоль. Для того чтобы это сделать, нам нужно снова найти эту переменную. В данном случае мы её находим в области видимости функции и у этой переменной значение 5, которое мы ей присвоили ей на строке b = 5. Следовательно, в консоль выведется значение 5.

После этого функция someFunc() завершает свою работу. Она возвращает undefined. Но этот результат мы не кому не присваиваем и никуда не выводим.

5. Печатаем в консоль значение переменной b. Но чтобы это сделать нужно найти эту переменную. Сейчас мы находимся в глобальной области видимости и поэтому поиск нужно начинать отсюда. Здесь эта переменная имеет значение undefined, поэтому мы и увидим его в консоли.

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

Основные моменты, которые необходимо знать при работе с переменными в JavaScript:

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

Комментарии: 2

ale:)opp
ale:)opp
Александр, добрый день! Наверное это опечатка?

Александр Мальцев
Александр Мальцев
Привет! Спасибо! Да, опечатка. Поправил.