Hello everyone,

Instantiation of Top-Level Variables

var a = 5

function myfunc(x) { alert('myfunc:'+ x) }

var yourfunc = function(x) { alert('yourfunc:'+ x) }

At this stage the browser finds function myfunc, creates the function and stores it as window.myfunc Because the function declarations are processed before everything, we can call a function before it is even declared. Therefore the following code is perfectly valid:

f();
function f() { alert('Works fine!'); }

Second, the interpreter scans for var declarations and creates window properties. Assignments are not executed at this stage. All variables start as undefined.

// 1. Function declarations are initialized before the code is executed.
// window = { myfunc: function }

// 2. Variables are added as window properties.
// window = { myfunc: function, a: undefined, yourfunc: undefined }

var a = 5;

function myfunc(x) { alert('myfunc:'+x) }

var yourfunc = function(x) { alert('yourfunc:'+x) } 

At this point, the variables are acknowledged but not their values. Interpreter does not care if a variable is a value or a function declaration. It simply ignores their values for now. The variables are undefined. As a side effect, it is impossible to have a variable and a function with the same name. At the next stage, the code starts running. When a variable or function is accessed, the interpreter gets it from window:

alert("a" in window) // true, because window.a exists
alert(a) // undefined, because assignment happens below
alert(myfunc) // function, because it is Function Declaration
alert(yourfunc) // undefined, because assignment happens below

var a = 5;  

function myfunc() { /*...*/ } 
var yourfunc = function() { /*...*/ }

Function Variables

When a function runs, on every function call, the new LexicalEnvironment is created and populated with arguments, variables and nested function declarations. This object is used internally to read/write variables. Unlike window, the LexicalEnvironment of a function is not available for direct access. Let’s consider the details of execution for the following function:

function testFunc(a) {
  var text = "This is a test function, " + a;
  alert(text);
}

testFunc('Berk');

Then the function code runs and the assignments are executed. A variable assignment internally means that the corresponding property of the LexicalEnvironment gets a new value.

function testFunc(a) {
// LexicalEnvironment = { a: 'Berk', text: undefined }
  var text = "This is a test function, " + a;
// LexicalEnvironment = { a: 'Berk', text: 'This is a test function, Berk'}
  alert(text);
}

testFunc('Berk');

The last line alert(text) searches the text in LexicalEnvironment and prints it’s value. At the end of execution, the LexicalEnvironment is usually junked with all its contents, because the variables are no longer needed. But it’s not always like that.

Unlike languages like Java, C etc, variables in JavaScript survive after a loop. That’s again, because their scope is a function.

for(var i=0; i<5; i++) { }
alert(i) /* 5, variable survives and keeps value */

Alright everyone, this is it for this tutorial. Leave a comment below if you have anything to add or ask. Happy coding!