今回はJavaScriptパターンの中で紹介されていた単独varパターンについてまとめます。

変数の巻き上げ

関数内では変数の巻き上げ(hoisting)が発生します。 巻き上げとは変数が関数のどの位置にあっても、先頭で定義されるという現象です。

var name = 'taro'; //グローバル変数

var hello = (function (){
    console.log(name); //変数巻き上げのため undifined
    var name = 'jiro'; //ローカル変数
    return 'Hi. my name is ' + name;
});

console.log(hello()); //Hi. my name is jiro;

上記では、hello()内の先頭でグローバル変数の値を取得しようとしていますが、関数内にもnameという変数が存在します。 その場合思ったような結果にはなりません。 処理の際にはこんな風に読み込んでいます。

var name = 'taro'; //グローバル変数

var hello = (function (){
    var name; //関数内では変数だけが先に定義される
    console.log(name); //変数にはまだ何も入っていないのでundifined
    name = 'jiro'; 
    return 'Hi. my name is ' + name;
});

console.log(hello());

先にnameが関数の先頭で定義されるため、consoleではまだ空っぽのnameを参照します。 そのためundifinedが返ってきます。

単独varパターン

変数の巻き上げを回避するには関数の先頭でその中で使用する変数をすべて定義してしまうのが有効です。 そうすることで意図しない変数の巻き上げを防ぐことができます。