Javascript Hoisting

При вивченні Javascript, одним з основних питань є різниця між оголошенням function expression і function declaration. Наприклад:

Function Expression

var x = function(){
  return true;
};

Function Declaration

function x(){
  return true;
};

Основна різниця між цими двома підходами заключається у ефекті підйому змінної. Підйом змінної - це те, що відбувається, коли ваш Javascript "компілюється" в браузері. Браузер читає код і визначає всі функції і оголошення змінних і переміщує їх у верхню частину сфери їх застосування.

Ось так:

function(){
  var a = true;
  var b = true;
  var c = function(){
    return true;
  };
  function d(){
    return true;
  };
}();

Отримується:

function(){
  function d(){
    return true;
  };
  var a;
  var b;
  var c;
  a = true;
  b = true;
  c = function(){
    return true;
  };
}();

Як ви бачите, всі функції і оголошення змінних поміщаються у верхній частині їх поточної області. Оголошення змінили своє розташування, але всі вирази з'являються там, де це було прописано у коді.

Що ми отримуємо

Наступний код видає помилку:

function(){
  a();
  b();//Uncaught TypeError: undefined is not a function
  function a() {
    return true;
  };
  var b = function(){
    return true;
  };
}();

Причина того, чому ми отримуємо помилку в тому, що піднімається лише змінна b, а не функція, яка знаходиться по праву сторону вираження.

Ось як цей код виглядає після підйому:

function(){
  function a(){
    return true;
  };
  var b;
  a();
  b();//Uncaught TypeError: undefined is not a function
  b = function(){
    return true;
  };
}();