Block Scope and Function Scope in JavaScript

Block Scope

JavaScript does NOT have block scope (think if blocks and the like). Variables used before assignment will be undefined and variables used after assignment will yield the expected value.

function a() {
    var hi = 'hi';
    console.log(hi);  //hi
    console.log(bye); //undefined

    if (true) {
        var bye = 'bye';
        console.log(hi);  //hi
        console.log(bye); //bye
    }
    console.log(hi);  //hi
    console.log(bye); //bye
}

Why? Because JavaScript hoists all variable declarations to the top of the function upon rendering the code. So effectively it is interpreted like this:

function a() {
    var hi, bye;    
    hi = 'hi';
    console.log(hi);  //hi
    console.log(bye); //undefined

    if (true) {
        bye = 'bye';
        console.log(hi);  //hi
        console.log(bye); //bye
    }
    console.log(hi);  //hi
    console.log(bye); //bye
}

The variable declarations hi and bye are hoisted to the top of the function and assigned as you would expect. As a result, bye is undefined when it is first referenced outside the if block and we don’t get an error. However, the second time it is referenced outside the if block, it has the appropriately assigned value, even though it is out of block scope.

Function Scope

JavaScript DOES have function scope. Variables defined in inner function scope and used in outer function scope will result in an error because the variable has not been defined in scope.

function a() {
    var hi = 'hi';
    console.log(hi);  //hi
    console.log(bye); //error

    function b() {
        var bye = 'bye';
        console.log(hi);
        console.log(bye);
    }
    b();
    console.log(hi);
    console.log(bye);
}

Variables used in outer function scope even after inner function scope assignment will result in error as well; however, if a variable has been defined in outer function scope, JavaScript will reach those variables and refer to their values within inner function scope.

function a() {
    var hi = 'hi';
    function b() {
        var bye = 'bye';
        console.log(hi);  //hi
        console.log(bye); //bye
    }
    b();
    console.log(hi);  //hi
    console.log(bye); //error
}

What about functions defined in inner scope and referenced in outer scope?

function a() {
    var hi = 'hi';
    function b() {
        var bye = 'bye';
        console.log(hi);  //hi
        console.log(bye); //bye
    }
    b();
}
b(); //error

The same holds true for them as well. Function scope is strict.

More JavaScript