JavaScript初級講座

スコープとは、変数名や関数名の有効範囲の事です。
JavaScriptには「グローバルスコープ」と「ローカルスコープ」の2種類のスコープがあります。
グローバルスコープは 関数の外側で、ローカルスコープは 関数の内側になります。
ローカルスコープで定義された変数や関数は、グローバルスコープから参照したり呼び出す事ができなくなります。

var hogeGlobalVar = "グローバルスコープの変数";
    
function hogeGlobalFunc() {
    var fugaLocalVal = "ローカルスコープの変数";
    
    function fugaLocalFunc() {
        return "ローカルスコープの関数";
    }
    
    alert(fugaLocalVal);    // ローカルスコープの変数と表示
    alert(fugaLocalFunc()); // ローカルスコープの関数と表示
    
    return "グローバルスコープの関数";
}
    
alert(hogeGlobalVar);    // グローバルスコープの変数と表示
alert(hogeGlobalFunc()); // グローバルスコープの関数と表示
//alert(fugaLocalVal);     // 未定義としてエラーになる
//alert(fugaLocalFunc());  // 未定義としてエラーになる

上でグローバルスコープからはローカルスコープの変数や関数を参照や呼び出すことができないと説明しましたが、ローカルスコープからはグローバルスコープの変数や関数を参照したり呼び出す事ができます。

var hogeGlobalVar = "グローバルスコープの変数";
    
function hogeGlobalFunc() {
    return "グローバルスコープの関数";
}
    
function fugaGlobalFunc() {
    
    function callGlobal() {
        alert(hogeGlobalVar); // グローバルスコープの変数
        alert(hogeGlobalFunc()); // グローバルスコープの関数
    }
    
    callGlobal();
}
    
fugaGlobalFunc();

ですが、もしもグローバルスコープの変数や関数と同じ名前がローカルスコープにもある場合は、グローバルスコープではなく、ローカルスコープで定義されたものが参照されます。

var hogeGlobalVar = "グローバルスコープの変数";
    
function hogeGlobalFunc() {
    return "グローバルスコープの関数";
}
    
function fugaGlobalFunc() {
    var hogeGlobalVar = "これはローカルスコープです！";
    
    function hogeGlobalFunc() {
        return "これはローカルスコープです！";
    }

    function callGlobal() {
        alert(hogeGlobalVar); // これはローカルスコープです！
        alert(hogeGlobalFunc()); // これはローカルスコープです！
    }

    callGlobal();
}
    
fugaGlobalFunc();
    
// グローバルスコープから呼び出すとグローバルスコープの変数と関数が参照される
alert(hogeGlobalVar); // グローバルスコープの変数
alert(hogeGlobalFunc()); // グローバルスコープの関数

変数や関数が呼び出される時は、最初に同スコープを探して、見つからなかった場合はひとつ上のスコープを探しにいきます。
これを繰り返して、グローバルスコープまで探しに行きます。

var msg1 = "グローバル1";
var msg2 = "グローバル2";
function func1() {

    function func2() {
        var msg2 = "ローカル2";

        function func3() {

            function func4() {
                alert(msg1); // グローバル1
                alert(msg2); // ローカル2
            }

            func4();
        }

        func3();
    }

    func2();
}

func1();

グローバルスコープでvarを付けたり付けなかったりした場合は新しく宣言された変数なのか既にある変数に代入しているのかの区別が難しくなります。
また、ローカルスコープでvarを付けなかった場合は上のスコープを探しに行き、そのスコープに同じ名前の変数や関数があると意図せず上書きしてしまう事になります。
このような問題を未然に防ぐためにも、グローバルスコープ、ローカルスコープを問わず、 新しく変数を定義する時は必ず「var」を付けてください。