What is scope in Javascript?

Question

I don't understand what the scope is. I've read somewhere that scope is the way to access varible. But I find it hard to come up with a case when a variable is accesible through scope. All varibles inside a function can be accessed through context of either 'global' or 'activation/variable' object or through closure. Here is the piece of code to demonstrate what I mean:

var global_var = 7;
var f = (function() {
    var closure_var = 5;
    return function() {
        var local_var = 3;
        alert(local_var);  // alerts 3  - visible through context as Activation Object's property
        alert(closure_var); // alerts 5  - visible through closure
        alert(global_var); // alerts 7  - visible through context as Global Object's property
        alert(this.global_var); // alerts 7  - visible through context as Global Object's property
    }
})();
f();

So what is scope? Here is the extract from here and my comments:

// a globally-scoped variable
var a=1;

// global scope
function one(){
    alert(a); 
}
// no, it's accessible as global object's context

// local scope
function two(a){
    alert(a);
}
// no, it's accessible as activation object's context

EDIT:

Thanks to everyone. I guess I'll have to look at scope from the point of variable and function.

Answer 1

Scope is the area within which the variable is active. Like a function or a page.

global_var and f are global to the page because they are outside of all functions, so they are available to all functions.

local_var is local to function f(), so it is not available outside of function f().

Answer 2

I'm going to assume you know what a scope is in computer science. If not, read the wiki page.

In javascript, every function has a scope. Additionally there's a global scope (when outside any function a defined variable is defined in global scope, or in a function when not preceding var in definition). Scopes are hierarchically. If you have a function F and a function G inside F, when trying to access a variable in G, it will check if the variable is defined in G scope. If not it will try in F scope. If not, it will try in the global scope.

// global scope
var a = 1;

function F() {
    var a = 2;

    function G() {
        var a = 3;

        // here, a is 3
    }

    // here, a is 2
}

// here, a is 1

All 3 variables are different (because they were defined with var) and you can change in the global scope, in F or in G.

// global scope
var a = 1;

function F() {
    a = 2;

    function G() {
        a = 3;

        // here, a is 3
    }

    // G is called, a is changed..
    G();

    // here, a is 3
}
// F is called, a is changed..
F();

// here, a is 3

All 3 variables are actually one, accessed anywhere (because it's in the global scope). A change will affect all 3 scopes.

// global scope
var a = 1;

function F() {
    a = 2;

    function G() {
       var a = 3;

        // here, a is 3
    }

    // here, a is 2
}

// here, a is 1

Since a was defined in G, inside it's scope it's different and isolated from the outside. Meaning, nothing outside G can access or change the variable a that is inside. They will only see a (if defined) from the global scope. Also because of the function scope behaviour, G function only exists inside F, you cannot call it from the outside.

Look at scopes as containers. They can be nested. You cannot look inside but they can look outside.

Answer 3

JavaScript has two scopes: global and local. A variable that is declared outside of a function definition is a global variable, and its value is accessible and modifiable throughout your program. A variable that is declared inside a function definition is local. It is created and destroyed every time the function is executed, and it cannot be accessed by any code outside the function.

Taken from the MSDN page about variable scope. READ IT!

Answer 4

The region where you can directly access any variable is called its local scope. Any variable that is declared outside all the functions are in global scope. So very simply local scope is the region where the variable can be directly accessed.

But local scope doesn't mean you cannot access any variable outside its scope. Here closure comes into picture and here is one simple example of closure:

function a () {
    var q = 10; 
    return function () {
        alert(q++)
    }
}
var b = a();  // returns a function for which var q is local

Now every time you call b by b() the var q will be incremented.

In JavaScript there is one deference between declaration of a function and a variable.

You can access a function anywhere inside the scope it is declared in, but with variables can be accessed only after the point where it is declared. Here is an example of it:

function ab() { 
    t();   // alert 1
    alert(a1);    // alert undefined
    var a1 = 1000; // Now declare a1
    alert(a1);    // alert 1000
    function t() {  // define function
        alert(1);
    } 
}

Answer 5

I think I've found the answer here:

When an execution context is created a number of things happen in a defined order.
...
Next the execution context is assigned a SCOPE. A scope consists of a list (or chain) of objects. Each function object has an internal [[scope]] property (which we will go into more detail about shortly) that also consists of a list (or chain) of objects. The scope that is assigned to the execution context of a function call consists of the list referred to by the [[scope]] property of the corresponding function object with the Activation object added at the front of the chain (or the top of the list).