Introduction to JavaScript - Tutorial 5 - Function Initialization and Variables



Hello everyone,

After a long break, I have decided to continue on the tutorial series I started writing a while ago. As you all know, Javascript is the programming language of the web and it is used in millions of website worldwide. Because of its commonality, it makes it an attractive programming language to learn. In today's tutorial, I am going to talk about function initialization, function variables and the scope of these variables. 



The mechanics of Javascript functions and variables is very different than most of the programming languages. In JS, all local variables and functions are properties of the special internal object called LexicalEnvironment.

The top-level LexicalEnvironment in a browser is window and it is also called a global object. 

Instantiation of Top-Level Variables

In JS, when a script is going to be executed, there is a pre-processing stage called variables instantiation. Let's analyze the following code line by line to see how the interpreter processes it:


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!
Author:

Software Developer, Codemio Admin

Disqus Comments Loading..