LearnJS

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

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

Глобальная переменная доступна из разных частей программы.

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

let siteName = 'LearnJS'; // глобальная переменная

function showMessage() {
  let message = 'Привет!'; // локальная переменная

  console.log(siteName);
  console.log(message);
}

showMessage();

Что это такое

Разница между локальной и глобальной переменной зависит от места объявления.

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

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

let userName = 'Анна';

function showUser() {
  let userAge = 25;

  console.log(userName);
  console.log(userAge);
}

userName объявлена снаружи функции.

userAge объявлена внутри функции showUser().

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

Глобальную переменную можно использовать внутри функции.

let language = 'JavaScript';

function showLanguage() {
  console.log(language);
}

showLanguage();

Результат:

JavaScript

Функция showLanguage() нашла переменную language во внешней области.

Глобальные переменные удобны для значений, которые действительно нужны в разных местах. Например, для настроек приложения.

const taxRate = 0.2;

function calculateTax(price) {
  return price * taxRate;
}

console.log(calculateTax(1000));

Результат:

200

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

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

Локальная переменная создается внутри функции и доступна только внутри нее.

function calculateTotal(price, delivery) {
  let total = price + delivery;

  return total;
}

console.log(calculateTotal(1000, 300));
console.log(total);

Первый console.log() выведет результат функции.

Второй console.log() вызовет ошибку, потому что переменная total снаружи функции недоступна.

Это нормальное поведение. Локальные переменные помогают функции не мешать остальному коду.

Параметры функции

Параметры функции тоже можно воспринимать как локальные переменные.

function greetUser(name) {
  console.log('Привет, ' + name + '!');
}

greetUser('Мария');

console.log(name);

Параметр name доступен внутри функции greetUser(). Снаружи этой функции его нет.

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

Одинаковые имена

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

let status = 'offline';

function showStatus() {
  let status = 'online';

  console.log(status);
}

showStatus();
console.log(status);

Результат:

online
offline

Внутри функции JavaScript взял ближайшую переменную status. Глобальная переменная осталась без изменений.

Такой прием лучше использовать аккуратно. Если одинаковые имена мешают читать код, лучше выбрать разные названия.

Изменение глобальной переменной

Функция может не только читать глобальную переменную, но и менять ее.

let counter = 0;

function increaseCounter() {
  counter++;
}

increaseCounter();
increaseCounter();

console.log(counter);

Результат:

2

Иногда это нормально. Например, если переменная действительно хранит общее состояние.

Но в учебном и рабочем коде лучше не менять глобальные переменные без необходимости. Функция, которая зависит только от своих параметров и возвращает результат, обычно проще для понимания.

function increaseValue(value) {
  return value + 1;
}

let counter = 0;

counter = increaseValue(counter);

console.log(counter);

Здесь изменение происходит явно: мы сами записываем новый результат в переменную counter.

Что выбирать

Если значение нужно только внутри функции, делайте переменную локальной.

Если значение нужно передать в функцию, используйте параметр.

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

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

Итого

1. Глобальные переменные объявляются снаружи функций и доступны из разных частей кода.

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

3. Параметры функции ведут себя как локальные переменные.

4. Функция может читать и менять глобальные переменные, но этим лучше не злоупотреблять.

5. Чем ближе переменная к месту использования, тем проще читать и поддерживать код.