JavaScript variable scope

The easiest way to understand scope is to think about what scope means. A scope is some device that you look through, think microscope or telescope. The word scope is derived from Greek words meaning to look out , target, or aim. A scope on a rifle is a great example. You look through the scope to focus in on something specific. The scope naturally blocks out things you are not trying to focus on. In programming, scope is very similar. Scope refers to some portion of code that you are focusing on. In JavaScript, there is a large scope, called global, and much smaller ones, called local scopes. Throughout this guide we will understand how these scopes are defined.

A globally scoped variable is any variable declared outside of a function. By default, in the context of a web browser, these global variables are added to the window object and can be accessed either directly by name or as an attribute of window, like this:

var x = 2;
alert(x);
// or
alert(window.x);

function setSomeVar(x) {
    someVar = x;
}
setSomeVar(2);
alert(someVar);

A locally scoped variable is a variable declared with the keyword var within a function. Local refers to the context of the function itself. When you declare a variable within a function it is made available throughout the entire function, and it is completely unavailable outside of the function. For example:

var x = 1;
function hello() {
    alert(x);
    var y = 2;
}
hello();
alert(y);

function sendMessage(message) {
    alert(message);
}
sendMessage('hello, friend');
console.log(message);

function go() {
    var x = 2;
    function add3() {
        return x + 3;
    }
    return add3();
}
alert(go());

JavaScript uses function level scope, not block level scope. What does this mean? A block generally refers to curly braces. So think conditions (if/else, switch) or loops (for, while). That means that each of these blocks do not get their own scope. Any variable declared from within a block will be available outside of the block as well. Take this for loop as an example:

for (var i = 0; i <= 10; i++) {
   console.log(i);
}
console.log('after', i); // prints "after 11" to the console