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 (client-side JavaScript). 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.