Is hoisting inside a function done when the function is called or when it is compiled?

In JavaScript, I am aware of how variable and function declarations are hoisted at the top of their respective scopes before executing the code.

Today, one question came to my mind regarding hoisting inside functions, for which I couldn't unfortunately find a good answer out there.

Consider the code below:

function f() {
    console.log(a);
    var a = 10;
}

The question is that: is the var a declaration in the function f hoisted when f is compiled or when it is actually invoked? And, whichever way is used, what's the reason behind using that?