How Closure gets set in Web API call?

Question

I was not getting how a closure variable gets attached to function ([[Scope]]) when making a Web API request like for timer (serTimeout).

function fun() {   
    function log() {console.log(callme) }; 
    console.dir(log); 
    setTimeout( log, 10000);
    const callme = "hi iam"
  }
fun()

function log gets access to variable callme when const do not get hoisted.

My thinking is that fun() is called , it is pushed to call stack , function log is then sent to WebAPI timer function , in the mean time fun gets run and sets callme variable in its execution context. Once Timer is over , fn log is pushed to callback queue and event loop after checking if call stack is empty pushes log to callstack for execution. I am not able to get the idea when callme gets attached to closure [[Scope]] of function log

Answer 1

IMHO, hoisting is a really bad concept that just happens to be useful. It leads to minunderstandings such as yours. The real way the interpreter works is something like my answer to this related question: JavaScript function declaration and evaluation order

For your specific example, you mention:

when const do not get hoisted

This is not really true. Of course, hoisting does not really exist in the language, it is just a concept programmers created to explain how the language behaves. Let's see how your code is interpreted when we split the parsing into two phases: compilation and execution:

function fun() {   
    function log() {console.log(callme) }; 
    console.dir(log); 
    setTimeout( log, 10000);
    const callme = "hi iam"
  }
fun()

Compilation phase

1. OK, we have a function definition fun, let's parse it's body
2. OK, we have a function definition log, let's parse it's body
   1. OK, we're logging a variable callme. Note the variable we are using
3. We want to call log after 10 seconds, Note the function setTimeout is using
4. We define a constant callme

Execution phase

1. OK, we are calling fun()
   1. We are declaring a function log(), create an instance of it
   2. We output the definition of log
   3. we are calling setTimeout(), find a variable/function called log - found it, add log to event queue
   4. Set the value of callme to "hi iam" (note that values cannot be set in compilation phase because it may involve executing code for example if we do const x = (1).toString(), const just means we cannot set the value outside of initialisation)
   5. End of function call, we detect that callme is used in a closure, attach it
2. 10 seconds pass by, OK event loop detects timeout, call log()
   1. We need to log callme - found it in a closure, log it.

This is how callme gets pulled into foo's closure. If you insist on using the hoisting terminology you can say that if there is a closure then const gets hoisted.

But you don't really need to know all the corner-cases of when hoisting happens and when it does not if you have as your mental model this two-phase interpretation. I strongly suggest reading the answer linked above to get a better understanding of how it works.