JS Tidbits: Scope

3 comments | Posted: 6 November 06 in Tutorials, by Cody Lindley

First I want to explain the concept of scope in programming terms, and then secondly explain the concept of scope in regards to JavaScript and the browser window. So, let’s jump right in.

The scope in the context of a programming language is a region in code where values are defined. For example, the code below demonstrates the defining and assigning of the variable z three times with three different values.

var z = 0;
function myFunction(){
            var z = 2;
            function myNestedFunction(){
                        var z = 8
            }
}

Although the z variable is defined with the same identifier (z), the scope of the z variable is different in each case. Based off the example, scope has allowed us to create isolated regions for defining 3 different z variables. These isolated regions are why each z variable is unique. That is to say, in our coding example the z variable is not re-assigning or overriding the value of the z variable because they are all defined in a unique scope. So, depending upon what scope you are in, the z variable has a different value. Don’t believe me? Let’s alert the different values and see if I am telling the truth.

var z = 0;
alert(z); //alerts 0
function myFunction(){
            var z = 2;
            alert(z); //alerts 2
            myNestedFunction();
            function myNestedFunction(){
                        var z = 8;
                        alert(z); //alerts 8
            }
}
myFunction();

If you run this code for yourself, you will be shown the number 0, 2, and then 8 in separate alert boxes.

Let’s look at another example in attempt to understand scope.

var z = 0;
var myObject = {
            z : 2 ,
            myNestedObject : { z : 8 }
}

The above example is an object object written in a literal format. This example again shows the defining and assigning of three unique z variables. However, because we are using an object object we have some nifty advantages. The differing scopes in this example can see each other. Let’s attempt to extract the value of z and place it in an alert dialog box.

var z = 0 ;
var myObject = {
            z : 2 ,
            myNestedObject : { z : 8 }
};

alert(this.z); //alerts 0
alert(myObject.z) //alerts 2
alert(myObject.myNestedObject.z) //alerts 8

Notice in this example, unlike my first example I didn’t have to place my alerts in the same scope as the z variables themselves. This is one big advantage OOP programming has over procedural programming. Because I used an object object in JavaScript I can now access the value of z from outside of its own scope. This is only one small peek into the advantages of using an object object in JavaScript. I’ll elaborate on the object object in a future article.

Let’s now focus on the use of the keyword this, which I used in my last coding example. Did you know that JavaScript runs in a scope? In fact the context in which JavaScript is being written is in the context of a browser window. So, it shouldn't be a surprize that JavaScript is running in the window object scope. It’s often stated that JavaScript actually has its own global scope. For the sake of clarity, and in reality, JavaScript has no global scope. What some refer to as the global scope in JavaScript is really just the scope inside of the window object. Let me show you.

alert(this); // alerts [object window]
alert(this.location); // alerts the URL location of the browser
alert(window.location); // alerts the URL location of the browser

The point I am trying to make is that all client-side JavaScript code is written in the scope of the window object. However, the code that is written into the window object can also have its own scope. Both of the examples giving in this article have already demonstrated this fact.

Discuss This Topic

  1. 1 Yannick

    Thanks for the writeup Cody. Nice and simple to follow and understand. I also wasn’t aware that JavaScript didn’t have a global scope and that it was really inside of the window object.

    I’m certainly looking forward to more of these JavaScript Tidbit articles.

    Peace and God Bless.

     
  2. 2 Cody Lindley

    @Yannick – Thanks, and yes expect more Tidbits in the coming weeks.

     
  3. 3 Tank

    This is really helpful. I had some situations where I was having to pass a variable around through some Ajax calls and change the value based on certain things that were return via an Ajax call. I had to tie the variable name to window.variable in order to get the scope correct. It makes a bit more sense now that I read this. Thanks!

     

Comments closed after 2 weeks.