Область видимості в JavaScript

Сьогодні поговоримо про область видимості змінної, а також про поняття пядняття змінної, або hoisting(з англ.)

Що таке область видимості?

Областю видимості окремої змінної є окрема частина програми, у якій конкретна змінна є визначена та доступна.

Як поділяються змінні по області видимості?

Змінні є локальними та глобальними. Якщо змінна визначена глобально, вона існує поза функціями. Що стосується локальної змінної, вона визначена в межах функції:

var v = 10;
var outer = function() {
   var v = 25;
   console.log(v);
}

console.log(v)               // 10
console.log(outer())         // 25

Таким чином можна сформувати цепочку вкладених областей видимості, всередині яких існуватиме своя межа бачення для функцій та змінних, позначених у них:

var v = 10;
var outer = function() {
   var v = 25;
   var inner = function() {
   var v = 40;
   console.log(v);
   }
   inner()
}

outer()       // 25, 40

Що таке підняття змінної, або hoisting?

var outer = function() {
   var inner = function() {
   console.log(v);
   var v = 40;
   // код інтерпритується як:
   // var v;
   // console.log(v);
   // v = 40;
   }
   inner()
}
outer()       // 25

У даному випадку відбувається підняття декларації змінної v , та не її значення 40. Саме тому отримується undefined. Для уникнення проблем у майбутньому, старайтесь визначати змінні з самого початку.