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;
      };
    
    }();