var у JavaScript — стара форма оголошення змінних

Загальний опис

var — це ключове слово в JavaScript, яке використовується для оголошення змінних. На відміну від сучасних let і const, змінні, оголошені за допомогою var, мають деякі особливості, які важливо враховувати.

По-перше, змінні, оголошені через var, мають функціональну область видимості, тобто вони доступні всередині всієї функції, навіть якщо оголошені всередині блоку. Наприклад:

function example() {
    if (true) {
        var message = "Привіт!";
    }
    console.log(message); // "Привіт!" - змінна доступна поза блоком.
}

По-друге, якщо змінна оголошується через var поза функцією, вона автоматично стає властивістю глобального об'єкта (window у браузері):

var globalVar = 10;
console.log(window.globalVar); // 10

Ще одна особливість — підняття (hoisting). Змінні, оголошені через var, «піднімаються» на початок своєї області видимості, хоча їх значення залишається невизначеним до моменту присвоєння:

console.log(a); // undefined
var a = 5;

Через це код може працювати неочікувано, якщо розробник не враховує підняття.

Використання var в сучасному JavaScript поступово відходить на другий план через появу більш зрозумілих і безпечних конструкцій let і const. Проте знання про var залишаються важливими для розуміння спадкових кодових баз.

правити

Порада

Не покладайтеся на undefined для перевірки існування змінної, оголошеної через var. Змінна може бути піднята, навіть якщо ще не ініціалізована.

автор: Bond правити

Порада

Коли оголошуєте змінну глобально через var, пам’ятайте, що вона додається до об'єкта window. Це може створити конфлікти з іншими глобальними змінними.

автор: Bond правити

Порада

При використанні старого коду, де активно застосовується var, перевіряйте наявність дублювання змінних. var дозволяє повторно оголошувати змінні в одній області видимості, що може викликати помилки.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

var ім’я_змінної = значення;

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	3

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

function testVarScope() {
    var x = 10;

    if (true) {
        var x = 20; // Перезаписує x у функціональній області
        console.log(x); // 20
    }

    console.log(x); // 20 - значення змінилося через функціональну область
}

testVarScope();

function hoistingExample() {
    console.log(a); // undefined
    var a = 5;
    console.log(a); // 5
}

hoistingExample();

<header>
  <h2 class="title">Використання "var"</h2>
  <p class="description">Демонстрація роботи "var" у функціональній області видимості</p>
</header>
<main>
  <div class="result">
    <p id="counterDisplay">Натискань: 0</p>
    <button id="incrementBtn">Збільшити лічильник</button>
    <button id="resetBtn">Скинути</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  font-size: 16px;
  padding: 10px 15px;
  margin: 5px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #fff;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #f0f0f0;
}

#counterDisplay {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 15px;
}

// Логіка роботи лічильника
(function () {
  // Оголошення змінної через var
  var counter = 0;

  // Елементи DOM
  var counterDisplay = document.getElementById('counterDisplay');
  var incrementBtn = document.getElementById('incrementBtn');
  var resetBtn = document.getElementById('resetBtn');

  // Обробник для кнопки збільшення лічильника
  incrementBtn.addEventListener('click', function () {
    counter++; // Збільшення змінної
    counterDisplay.textContent = `Натискань: ${counter}`; // Оновлення відображення
  });

  // Обробник для кнопки скидання
  resetBtn.addEventListener('click', function () {
    counter = 0; // Скидання значення
    counterDisplay.textContent = `Натискань: ${counter}`; // Оновлення відображення
  });
})();
//# sourceURL=pen.js