Не пойму как работает код на JS, hoisting

Web Frontend: JavaScript, HTML/CSS
#1 
var a = 2;
foo();            // работает, так как определение `foo()`
                    // "всплыло"
     function foo() {
         a = 3;
         console.log( a );     // 3
         var a;                // определение "всплыло"
                                  // наверх `foo()`
}

console.log( a );        // 2

Пример взят из книжки
тема: Поднятие переменной (Hoisting)
Может кто обяьснить как это работает?

#2

А что именно непонятно?
Тут же просто пример того, как этот hoisting можно использовать (но обычно не нужно, такой пример с переменной только усложнит понимание кода людьми).
Ну то есть что можно обращаться к функциям/переменным до их объявления, потому что интерпретатор умный.

И еще тут про глобальные/локальные переменные. Внутри этой функции своя переменная а, не та, что снаружи. Без var a; было бы обращение к глобальной переменной.

#3