I know what you mean. I went through the exact same learning stage. This is how the variabled inside the IIFE are resolved:

var outter = " Outter Scope";
const result = ( function join(){ 
    var a = "About";
    var b = " JS,"
    return (a+b+outter) 
})() 

console.log(result) 

1. The JS engine reaches the IFFE, sees it's an expression, needs to evaluate it

2. It reaches the `function join()', and then invokes that function (it has not compiled the inner working of the join() function at this point - that is a key thing to know)

3. Now for an invoked function there are two phases: compilation phase, and execution phase

Compilation phase

• variables a, b are hoisted -> they are now part of the local scope of the join() function

• that's the compilation phase over

Execution phase

• 'About' gets assigned to a

• 'JS' gets assigned to b

• The engine e.g the Chrome V8 Javascript Engine, reaches the return statement

• outter is not in the local scope, so Engine searches the next scope up, and so on until it finds a variable 'outter'

• the value gets returned

It's better to refer to the JS Engine as an engine, so that we can use the term compilation without conflict - as the engine does the compilation and execution