JavaScript Execution Context

javascript developers do not pay much attention to the internals of javascript execution, namely execution context. even experienced javascript developers lack the necessary knowledge about execution context.  nevertheless, the concept of execution context is simple. it consists of details for the environment of a function that is executed. to make execution context more clear,  we will try to give some insight for understanding execution context.

first of all, there are two types of execution context: the first one is global and second one is functional. global context can be accessed from anywhere in the program while functional context  can be accessed by the function itself and inner functions of it. accessing parent function context results in scope chains, which is the ability to access the scope of the calling function. let’s examine global and functional context with an example:

//global context 
var x = 1; 
function foo(){ 
	//foo context 
	var y = 2; 
	//console.log(x+","+y+","+z); (1) 
	return function inner(){
		//inner context 
		var z = 3; 
		console.log(x+","+y+","+z); //(2) 
	}
} 
//console.log(x+","+y+","+z); (3) 
foo()();

from the above code snippet, the first log will give a reference error because of the variable z, the second log will execute just fine and the third log will give a reference error for y.  the reference errors occur because the current execution context cannot resolve the identifiers. but, each inner function can see its outer function variables. after giving this basic example, let’s dive into details.

browsers interpret javascript as single-threaded, which means one thing can be done at one time. similarly, we can see one execution context at one time. when a page loads, global execution context is created and put into the execution context stack. after that, the interpreter creates a new execution context for each function call while preserving scope chains. besides, each created execution context is put into the stack with respect to their order. when any of the execution context is finished, the interpreter removes it and continues to execute previous execution context. below, you can see the figure representing the stack for execution context.
moreover, execution contexts have a life cycle, that can be divided into creation and execution phase. in creation phase, interpreter follows the steps below:

1. each variable, function or argument is created.(variable object is created)
2. scope chain is initialized.
3. value of “this” is determined.

in execution phase, code is interpreted and executed. now, let’s observe each steps of creation phase thoroughly.
in creation phase, variable object is created first. then, arguments object is created. after setting necessary objects, interpreter scans for function declarations and creates a corresponding property for each function in variable object. if there is already reference for the function in variable object, interpreter just overrides it. the same process followed for variable declarations but interpreter just passes declarations that already exists in variable object. after finalizing variable context, scope chain is created and we are ready to run the function. let’s see below function and how it looks like in creation stage.

function foo(z){
   var x = "hello world!";
   var y = function(){
      alert(x);
   };
   function f(){};
}
foo(13);

our function looks like as follows in creation stage.

executioncontextforfoo(){
   variableobject : {
      arguments : {
         0 : 13,
         length : 1
      },
      z : 13, // remember, reference to functions created first.
      f : pointer to the function f 
      x : undefined,
      y : undefined
   },
   scopechain : {...},
   thisforfoo : {...}
}

at this point, hoisting occurs since we first create pointers to the functions and variables, then execute. let’s look at the example below.

(function(){ 
	alert(typeof hello);//prints pointer to hello function 
	alert(typeof hi);//prints undefined 
	var hi = function(){ 
		alert("hi!"); 
	} 
	function hello{ 
		alert("hello!"); 
	}
})(); 

function decelerations are always hoisted, any variable is initialized to undefined. in above example, “hi” is a variable and defined as undefined in variable object.
in short, we have tried to explain execution context and give an overview. for more information, you can follow the link below.
ecma-262