JavaScript – Global, Function and Lexical scopes.

Scope is the set of variables you have access to. In JavaScript, scope is the set of variables, objects, and functions you have access to.

Global JavaScript Variables

A variable declared outside a function, becomes GLOBAL.

A global variable has global scope: All scripts and functions on a web page can access it.

var carName = ” Toyota”;

Automatically Global

If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.

This code example will declare carName as a global variable, even if it is executed inside a function.

function myFunction() {
carName = “Volvo”;

}

The Lifetime of JavaScript Variables

The lifetime of a JavaScript variable starts when it is declared.

Local variables are deleted when the function is completed.

Global variables are deleted when you close the page.

Function Scope: means that any variable which is defined within a function is visible within that entire function. This is quite different form Block Scope, in which a variable scope is limited by the block a variable is declared in. A block is usually what you find between {curly braces} or loop variables.Block Scope is used in most of the programming languages that are currently popular. Think of a for(; ;){} loop:

var i = 1;
for (var i = 0; i<10; i++){}
alert(i);
// block scope    -> 1
// function scope -> 10
Lexical Scoping: defines how variable names are resolved in nested functions: inner functions contain the scope of parent functions even if the parent function has returned.

Other names of Lexical Scoping are Static Scoping or Closure. It means that the scope of an inner function contains the scope of a parent function. Let’s have a look at the following example:

var text = ‘Look at me’;

var parent_function = function () {

var inner_function = function () {
var scream = ‘!!!’;
alert(text + ‘, ‘ + reason + scream);
}

var reason = “I’m baby”;
var scream = ‘!’;

alert(text + scream);
inner_function();
};

parent_function();
// alerts the two following strings, in this order:
// “Look at me !”
// “Look at me, I’m baby !!!”

Look at what happens when the inner_function is called. It needs to alert all three of the following variables: text, reason and scream.

The first variable that needs to be looked up is text. This variable is neither declared in the scope of the inner_function nor in the scope ofparent_function. So it takes the globally declared text.

The second variable the alert() in the inner_function needs is reason. This variable is not declared within the inner_function. Hence it is looked for in the enclosing parent_function scope where it finds the truth about my nature. "I'm an attention whore".

The 3rd variable inner_function needs to alert() is scream. It is declared within inner_function and parent_function. The alert is called in the scope of inner_function, hence it is resolved to '!!!'.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s