【JavaScript入門】ローカル変数の独特な振る舞い

JavaScriptのローカル変数の独特な振る舞いについて記載します。

その前に、おさらいですがローカル変数とは、関数内に var で定義された変数のことです。

※ var を付けないで宣言すると、グローバル変数となります。
※ 変数のスコープの種類について知りたい方は、こちらの記事を参照してください。

ローカル変数の振る舞い

以下のコードを例に振る舞いを見ていきます。
変数 local の定義場所 に注目してください。

showLocalVal();

function showLocalVal(){

    console.log(local); // ①

    var local = 10;
    local++;
    console.log(local);

}

showLocalVal();

function showLocalVal(){

console.log(local); // ①

var local = 10;

local++;

console.log(local);

}

① では、まだ定義されていない、変数local を使用しています。

この場合、JavaScriptではエラーにはならず、”undefined” になります。

理由は、ローカル変数はどの位置で定義されていても、関数の先頭で定義されているように引き上げられるからです。

なので、上記のコードは、以下のコードと同等の意味を持ちます。

showLocalVal();

function showLocalVal(){

    var local; // ①

    console.log(local);

    local = 10;
    local++;
    console.log(local);

}

showLocalVal();

function showLocalVal(){

var local; // ①

console.log(local);

local = 10;

local++;

console.log(local);

}

関数の先頭（①）で、local が宣言されていますが、初期化されていないため、②で “undefined” と表示されます。

JavaScriptのローカル変数は、コード上での定義位置に関わらず、関数内の先頭で定義されたと認識されます。

例のように、定義前に使用してもエラーにならないので、稀に不具合の原因になることもあるのではないでしょうか。

ただ、JavaScriptの振る舞いが、上記だとしても、コードの可読性をあげるには、やはり変数宣言は使用場所の近くでするべきだと思います。

なので、JavaScriptのローカル変数は、”特殊な振る舞いをする” と頭の隅っこに入れておく程度でいいと思います。