function hoisting for inner function calls

Question

Please note: ^ This question is not a duplicate to a let/const question as that is unrelated. The same question remains regardless if it was var, let, or const since that is unrelated to the intent of the question.

---

I would really appreciate some clarification on function hoisting within another function. This is what I understand clearly so far:

This does not work because anotherFunc is being called in the file before it's created and const does not hoist before it's created.

const someFunc = () => {
 console.log('someFunc called');
}
   
anotherFunc(); // anotherFunc is not defined error
   
const anotherFunc = () => {
 console.log('anotherFunc called');
}

This works because anotherFunc is a function declaration and they are hoisted to the top as per JS rules:

anotherFunc(); // anotherFunc called

function anotherFunc() {
    console.log('anotherFunc called');
}

Doesn’t work because it’s a function expression and since they are assigned to a var variable, the variable will be hoisted to the top and undefined initially:

anotherFunc(); // anotherFunc is not a function at <anonymous>

var anotherFunc = function () {
    console.log('anotherFunc called');
}

So can someone explain to me why this works(see below)? This is a step deeper from everything explained online.

If a function is declared later but is called inside another function before it, why does it work? This has something to do with JS execution order?

const someFunc = () => {
    console.log('someFunc called');
    anotherFunc();
}
   
const anotherFunc = () => {
 console.log('anotherFunc called');
}

someFunc(); // 'someFunc called' 'anotherFunc called'

Is it because someFunc and anotherFunc are first assigned by JS in memory so then calling them later doesn't matter what order they are in?

Lastly, does this differ for const/let/var functions in the same scenario(the last one)?

Thank you so much for the clarification!

Answer 1

JavaScript's Execution Context has two components:

• Memory (Variable Environment)
• Code (Thread of Execution) - Sync & Single-Threaded meaning JS can only do things one by one and in a certain orders(one after the other)

So the reason this works:

const someFunc = () => {
    console.log('someFunc called');
    anotherFunc();
}
   
const anotherFunc = () => {
 console.log('anotherFunc called');
}

someFunc(); // 'someFunc called' 'anotherFunc called'

...is because JS first allocates someFunc and anotherFunc to undefined within memory(as I had suspected in my question). Function declarations are also saved here as the entire function.

This is the memory allocation phase. Then it runs the code execution phase.

JS goes lines by line and adds the values to the variables.

If the value for the key saved in memory is a function it creates another inner Execution Context and once again runs a Memory Allocation and Code Execution Phase for that particular function.

So in my case:

1. Execution Context is created.
2. someFunc and anotherFunc are allocated to memory as undefined.
3. someFunc gets called and a new inner Execution Context is created.
4. console.log runs.
5. anotherFunc gets saved to undefined in memory within someFunc execution context. Code execution runs and anotherFunc gets called and another Execution Context gets created for that function. Since it has no variable etc. it just runs the console.log.
6. anotherFunc is complete and its Execution Context gets removed. It gives its' power back to someFunc(this also happens when a function returns).
7. someFunc is complete and it's Execution Context gets removed. It gives its` power back to the main JS Execution Context.(this also happens when a function returns).

This guy explains it all very clearly: https://youtu.be/iLWTnMzWtj4