Understanding Initialization concept in JavaScript

 

Initialization of functions and variables

 
Let's understand, how initialization mechanism of functions and variables in JavaScript works.
 
There is a concept of LexicalEnvironment and in JavaScript all local variables and functions are properties of this object. to know more about lexical environment refer link LexicalEnvironment andLexical scope vs Dynamic Scope.
 
In short LexicalEnviornment is a set of all binding of variables and functions of the program in the scope. When JavaScript program start it search all the variable lexically and put them in that scope and then it get resolved later runtime by referencing this variable. You can think of this as an object which contains references of all your variable and functions when your program start.
 
Let's understand the initialization step by step from example.
var a = 5;

function normalFun(arg){alert(arg);}
  var refFun = function(arg){
  alert(arg);
}
 
Step 1: Functional declaration initialized before the code start executing. So prior to the first line of code we have function reference available in 'window' scope. i.e. window = {normalFun:function} and that's why we are able to call normalFun() before it's declaration.
/** 
Function declaration added to browser window object 
even before the first line of code start executing.
 window = {normalFun:function}
*/
var a = 5;

function normalFun(arg){alert(arg);} // Functional Declaration
  var refFun = function(arg){
  alert(arg);
}
 
Step 2: In Second step the interpreter start scanning for var declarations and creates 'window'properties. Please make a note that the assignment is not happening at this stage. All variables are'undefined' at this stage. So, in second steps code will look like below.
 
/** 1. Function declaration added to browser window object even before 
	the first line of code start executing.
 window = {normalFun:function}
 2. Now variables with var are added to window object.
 window = {normalFun:function, a:undefined, refFun: undefined};
 
 refFun is a functional reference but interpreter doesn't care, 
 it treats it as a variable and add it to window object. 
 */
var a = 5;

function normalFun(arg){alert(arg);} // Functional Declaration
  var refFun = function(arg){
  alert(arg);
}
 
So from the above code this is what we understood. 

  • Functional declarations are ready to use functions i.e you are allowed to call a function before its declaration.
  • Variables start as undefined.
  • All assignments happen at the time of code execution when execution reaches to them.

Note:** Since variables and functions are part of window object and because of that it is impossible to have the variable and function with same name.
 
Step 3: Code start executing. So let's see what will be the output, when we access variables and functions before their declaration.
 
alert(a); // undefined, now you know why?
alert(normalFun); // function, because it's a function.
alert(refFun); // undefined. because assignment is not yet applied.
var a = 5;

function normalFun(arg){alert(arg);} // Functional Declaration
  var refFun = function(arg){
  alert(arg);
}
 
Step 4: So let's see what will be the output, when we access variables and functions after declaration.
 
var a = 5;
function normalFun(arg){alert(arg);} // Functional Declaration
 var refFun = function(arg){
 alert(arg);
}

alert(a); // 5
alert(normalFun); // function
alert(refFun); // function
 
Variables declared without var keywords got added to window object but after the interpreter executed that part of code. For example.
 
 if ("b" in window) //return false, there is no b in window object;
 alert(b); throw an error.
 b = 10;
 // But after the assignment variable 'b' will become regular variable of window object.
 

Functional variables

 
Step 1. When function runs, every function call create new LexicalEnvironment and populated with arguments, variables and nested functions. Let's understand this by example.
 
/**
 LexicalEnvironment = { makeFullName: function, firstName: 'Deepak',
 lastName: 'Singh', nameIntro: undefined};
 */
	function showName(firstName, lastName){
	var nameIntro = "Your Name is ";

	function makeFullName(){
		return nameIntro + firstName + " " + lastName;
	}

	return makeFullName();
}

showName("Deepak", "Singh"); // Your Name is Deepak Singh
 
Step 2. Then function code runs and assignments got executed. So this is how code will look like after the function code run.
 
/**
LexicalEnvironment = { makeFullName: function, firstName: 'Deepak', 
lastName: 'Singh', nameIntro: undefined};
*/
function showName(firstName, lastName){
  var nameIntro = "Your Name is ";
/** 
LexicalEnvironment = { makeFullName: function, firstName: 'Deepak', 
lastName: 'Singh', nameIntro: 'Your Name is '};
*/
 function makeFullName(){
	return nameIntro + firstName + " " + lastName;
 }
/**
LexicalEnvironment = { makeFullName: function, firstName: 'Deepak', 
lastName: 'Singh', nameIntro: 'Your Name is Deepak Singh'};
*/

	return makeFullName();
}

showName("Deepak", "Singh"); // Your Name is Deepak Singh
 
 
Hope this is useful and given you understanding of initialization concept in JavaScript.
 
Keep Reading and Keep learning.