«
»

クロージャが効かないバグになりそうなJavaScriptの仕様

2016 年 11 月 10 日 by 山平

今年度入社の新人がJavaScriptの勉強をしていました。
少し手ほどきした、という話は以前にしました。

で、その後自由に手を動かしてもらっていたのですが、ひょいとのぞいたときに「んん～？」となったことがあったので記録しておこうと思います。

問題（ではないのですが）のサイトはこちら

ローカル変数は関数全体で有効だから同じ関数内なら変数宣言より前のコードからアクセスできるΣ(･ω･ﾉ)ﾉ！
→「ホイスティング(巻き上げ)」と呼びます

[JS]
var scope = “Global”;
function getValue() {
console.log(scope);    // undefined
var scope = “Local”;
return scope;
}
console.log(getValue());    // “Local”
console.log(scope);    // “Global”
[/JS]

仮引数もローカル変数……同名の変数でも別物として扱います

[JS]
var n = 0;
function hoge(n){
n++;
return n;
}
console.log(hoge(n));    // 1(仮引数(ローカル変数)を参照)
console.log(n);        // 0(グローバル変数を参照)
[/JS]

これ、クロージャ効かないんでしょうか？
試しに少し書き換えて動作を確認します。

「ホイスティング(巻き上げ)」の確認

[JS]
var scope = “Global”;
function getValue() {
console.log(scope);    // undefined => “Global”に変わった！
//var scope = “Local”; // ★ここをコメントアウト
return scope;
}
console.log(getValue());    // “Local” => “Global”に変わった！
console.log(scope);    // “Global” => “Global”のまま
[/JS]

「仮引数もローカル変数」の確認

[JS]
var n = 0;
function hoge( /* n */){  // ★仮引数をコメントアウト
n++;
return n;
}
console.log(hoge(n));    // 1(仮引数(ローカル変数)を参照)
console.log(n);        // 0(グローバル変数を参照)  => 1に変わった！
[/JS]

はい、この書き方だと、クロージャとして動きました。
私個人としては、「ホイスティング(巻き上げ)」「仮引数もローカル変数」よりもクロージャの方が身近なので、これはクロージャが効かなくなる仕様だ、と思いました。
逆にクロージャに不慣れな方は、変数に期待しない値が入ってしまう仕様だ、と感じるかもしれないです。

新人教育といいつつ、自身のためにもよい勉強になりました。

タグ:

TrackBack