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:

  1. A different beast
  2. Types and Type Conversion
  3. Functions
  4. Scopes and Scope Chain
  5. Closures
  6. Objects without Classes
  7. Inheritance without Classes
  8. Arrays, Maps and the for..each loop
  9. Literals and JSON
  10. 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

About Rahul Mohan

Technical researcher interested in model-driven development of enterprise business applications. Passionate about web technologies and a huge admirer of open-source especially in the Java landscape. When I am not doing any of the above you can find me with my camera (www.flickr.com/photos/rahulmohan/) or listening to music. (In fact, the title of the blog is inspired by Led Zeppelin's Physical Graffiti. )

Posted on May 15, 2011, in JavaScript, Tutorial and tagged , , , , , , , . Bookmark the permalink. 5 Comments.

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: