Important and fundamental concept to understanding Javascript language is understanding Executon Context. By learning this, you are positioned nicely to learn more advanced topics like hoisting, scope chains and closure.

Execution context

  • EC allows the Javascript engine to manage the complexity of interpreting and running your code
  • Each EC consists of 2 stage; the creation phase and the execution phase
  • The first EC is created when the Javascript engine runs your code and is called the Global Execution Context and it will consists of a global object and this which will reference the global object
{
  window: global object
  this: window
}

  • in the global execution context, the javascript engine will

    • create a global object
    • create an object called this that references the global object
    • set up memory space for variables and functions
    • assign variable declarations as default value of undefined while placing any function declarations in memory

  • the process of assigning variable declarations a default value of undefined during creation phase in a execution context is called hoisting

  • the only time an execution context is created is when the javascript engine first starts interpreting code and when a function is invoked

  • in the function execution context, the javascript engine will

    • create an arguments object
    • create an object called this that references the global object
    • set up memory space for variables and functions
    • assign variable declarations as default value of undefined while placing any function declarations in memory

  • anytime a function is invoked, a new execution context is created and added to the execution call stack. Whenever a function is finished running through both the creation and execution phase, it gets popped off the execution call stack

  • the process of the javascript engine going one by one and checking each individual parent execution context if a variable doesn’t exist in the local execution context is called the scope chain

Closures

var count = 0;
function makeAdder(x){
  var temp = x;
  return function inner(y){
    return temp + y;
  }
}

var add5 = makeAdder(5);
count += add5(2)

For the code snippet above, count will result to 7. It got there through the usage of closures. Let’s go through it step by step

  • start
  • Global execution context(GCE) goes through creation phase at the start and create the global object and this object that references the global object, assigned variable declaration the default value of undefined and reserve memory in for functions declaration
  • GCE goes through execution phase and starts going through code line by line and assigning value to the variable. variable count gets assigned 0, function makeAdder declaration gets reserved in memory
  • makeAdder(5) get invoked, thus creating another function execution context and gets put on the execution call stack. Starting in the creation phase
    • It will create the arguments object {0:5, length:1}
    • It will create the this object referencing the global object
    • var temp will defined default value of undefined
    • argument x get defined default value of undefined
    • function inner gets reserved in memory
    • It will then go in execution phase and assigns temp variable the value of x which is 5
    • By returning a function, the function called inner will create a closure over the makeAdder function. Creating a closure scope
    • End of makeAdder function, and it get popped off the execution call stack
  • variable add5 gets assigned to the function called inner
  • add(5) is invoked, thus creating another function execution context and gets put on the execution call stack. Starting in the creation phase
    • It will create the arguments object {0:2, length:1}
    • It will create the this object referencing the global object
    • var temp will defined default value of undefined
    • argument y get defined default value of undefined
    • It will then go in execution phase and assigns var y value of 2
    • The value of temp is still available in the closure scope, so the execution context will go up into the closure scope through scope chain and retrieve the value of temp of 5
    • End of inner function will return 5 + 2 = 7, and it get popped off the execution call stack
    • var count gets assigned the value of 7
    • closure scope get popped off the call stack
    • end