why does variable hoisting occurs in JavaScript, in terms of execution context -

i came know variable hoisting because of steps in execution context. why variable hoisting occurs in javascript, in terms of execution context.

here pseudo-overview of how interpreter evaluates code:

find code invoke function.

before executing function code, create execution context. initialize scope chain.

create variable object:

create arguments object, check context parameters, initialize name , value , create reference copy.

scan context function declarations:

for each function found, create property in variable object exact function name, has reference pointer function in memory.

if function name exists already, reference pointer value overwritten.

for each variable declaration found, create property in variable object variable name, , initialize value undefined.

if variable name exists in variable object, nothing , continue scanning.

determine value of "this" inside context.

run / interpret function code in context , assign variable values code executed line line.

let’s @ example:

function foo(i) {     var = 'hello';     var b = function privateb() {         };     function c() {         } } foo(22); on calling foo(22), creation stage looks follows:     fooexecutioncontext = {     scopechain: { ... },     variableobject: {         arguments: {             0: 22,             length: 1         },         i: 22,         c: pointer function c()         a: undefined,         b: undefined     },     this: { ... } } 

as can see, creation stage handles defining names of properties, not assigning value them, exception of formal arguments / parameters.

once creation stage has finished, flow of execution enters function , activation / code execution stage looks after function has finished execution:

fooexecutioncontext = {     scopechain: { ... },     variableobject: {         arguments: {             0: 22,             length: 1         },         i: 22,         c: pointer function c()         a: 'hello',         b: pointer function privateb()     },     this: { ... } } 

a word on hoisting

you can find many resources online defining term hoisting in javascript, explaining variable , function declarations hoisted top of function scope. however, none explain in detail why happens, , armed new knowledge how interpreter creates activation object, easy see why. take following code example:

​(function() {      console.log(typeof foo); // function pointer     console.log(typeof bar); // undefined      var foo = 'hello',         bar = function() {             return 'world';         };      function foo() {         return 'hello';     }  }());​ 

the questions can answer are:

why can access foo before have declared it? if follow creation stage, know variables have been created before activation / code execution stage. function flow started executing, foo had been defined in activation object. foo declared twice, why foo shown function , not undefined or string?

even though foo declared twice, know creation stage functions created on activation object before variables, , if property name exists on activation object, bypass deceleration.

therefore, reference function foo() first created on activation object, , when interpreter gets var foo, see property name foo exists code nothing , proceeds. why bar undefined?

bar variable has function assignment, , know variables created in creation stage initialized value of undefined.

variable hoisting bible