JavaScript - A Different Beast, Part-4: Scopes and Scope Chain

Previous topic in this series: Functions in JavaScript

This is the fourth part of my tutorial on JavaScript. Focus of this series is to introduce developers who are comfortable with other programming languages like Java or C to the idiosyncrasies of JavaScript. Basic JavaScript knowledge is assumed, but is not necessary as the code samples are simple and self-explanatory.

Topics: A different beast Types and Type Conversion Functions Scopes and Scope Chain Closures Objects without Classes Inheritance without Classes Arrays, Maps and the for..each loop Literals and JSON Dynamic Programming, Exceptions and Module Pattern

Nested functions

Functions can even be defined inside the body of other functions. This is because functions are first class objects in JavaScript. They are as good as any other String, Number or a user defined Object. Code-2.6 is an example.

//Code – 2.6:  Nested functions
function foo(){
     var x = 10;
     function bar() {
            //...some code here
     }
     var y = function() {
             //more code
     }
}

The only difference between functions foo and the other two inner functions – bar and y – is in their scope.  Without proper techniques for scoping, your variables and functions would keep colliding with other objects created by other programmers in a large project. In an interpreted language like JavaScript, it would be really tough to figure out why things are going haywire.

Scope

JavaScript is a statically scoped language, and not a dynamically scoped language. Static scope (a.k.a lexical scope) means that whenever a variable is referred, it is searched in the lexical scope (enclosing program blocks) where the variable is referred. Almost all the programming languages are statically scoped, the only notable exception being Common-Lisp. Code-2.7 demonstrates static scoping using an example.

//Code – 2.7:  Static Scoping
var x = 0; //defined in global scope
function f() { return x; }
console.log(f()); //prints 0
function g() { var x = 1; return f(); }
console.log(g());//prints 0 - Therefore, its lexically scoped.

Function f is defined in the same program scope (the global scope in this case) as variable x, and therefore it will always return the value of x in the global scope. [In a dynamically scoped language, the direct call to function f will print 0 and the indirect call from function g will print 1, since it is specifying a new variable x in its local scope. On execution of function f, it will look for a value for x in the current execution stack and will find the new definition created by g. Java is dynamically scoped.]

There is no block-scope! The only way to define scopes in JavaScript is using functions, unlike Java or C# where a pair of curlies – ‘{’ and ‘}’ – will do the trick. Consequently, looping constructs like for,do..while,while  do not create a new block-level scope.

About these ads

Pages: 1 2