Scope of Variables

If a variable is defined inside a function, it's not visible outside of the function and are termed as "local variables".

But a variable defined inside an if or a for code block is visible outside the code block and are termed as "global variables".

The code inside a function has access to all global variables as well as to its own local variables.

In the below example, The function f() has access to the variable global outside of the function f(), the variable local doesn't exist.

var global = 1;

function f() {
    var local = 2;
    global++;
    return global;
}

f();
2
f();
3

local
local is not defined

Note

It is also important to note that if you don't use var to declare a variable, this variable is automatically assigned global scope.

For example the function f() contains the variable local. The variable doesn't exist until the function is called. When you call the function for the first time, the variable local is created with a global scope and you will be able to access variable local outside the function.

Best Practice Tips

Always declare your variables with the var statement and minimize the number of global variables. If two people working on two different functions in the same script and they both decide to use the same name for their global variable, this could lead to unexpected results.

Below example shows importance of the local versus global scoping.

snippet

var a = 123;

function f() {
    alert(a);
    var a = 1;
    alert(a);
}

f();

You might expect that the first alert() will display 123 (the value of the global variable a) and the second will display 1 (the local a). But this is not the case.

The first alert will show "undefined", because inside the function the local scope is more important than the global scope. So a local variable overwrites any global variable with the same name. At the time of the first alert() a was not yet defined (hence the value undefined) but it still existed in the local space.

Nested scope (Eloq)

..............

JavaScript distinguishes between global and local variables. Functions can be created inside other functions, which produces several degrees of locality.

For example, below function has two functions inside of it.

snippet

var landscape = function() {
    var result = "";
    var flat = function(size) {
        for (var count = 0; count & lt; size; count++)
            result += "_";
    };

    var mountain = function(size) {
        result += "/";
        for (var count = 0; count & lt; size; count++)
            result += "'";
        result += "\";
    };
    flat(3);
    mountain(4);
    flat(6);
    mountain(1);
    flat(1);
    return result;
};
console.log(landscape());
//!___/''''______/'_"

The flat and mountain functions can "see" the variable called result, since they are inside the function that defines it. But they cannot see each other's count variables since they are outside each other's scope. We cant see any of the variables defined inside landscape from outside environment. Each local scope can also see all the local scopes that contain it.

var something = 1; {
    vars omething = 2;
    //Do stuff with variable something...
}
//Outside of the block again...

The variable something inside the block refers to the same variable as the one outside the block. Blocks like this are allowed, but they are useful only to group the body of an if statement or a loop.