JavaScript:基本だけど重要！変数を var で宣言した場合としない場合の違い

Advertising

JavaScript で変数を使用する場合に var を使用するときとしないときがあります。var を省略しても一見問題ないように思いますが、使い方によっては両者は別の動きをすることがあります。

そんなこと言われなくても見れば分かるよ、と言われそうですが、ちゃんと理解していないと後で苦労することになるので、今回はこの違いについてメモしておきます。

INDEX

変数を var で宣言した場合としない場合の違い

難しい言葉で説明すれば、var は明示的に変数を宣言する。関数内で宣言された var ステートメントは関数に対してローカルスコープになる。と言うことなのですが、サンプルコードを見ればなんてことはないことが理解できます。

var を使用すると、そのスコープ内に宣言した名前を生成するため、以下のサンプルでは val はそれぞれ別の変数として扱われる。

サンプルコード

[code]
var val = 10;

var myFuncA = function() {
return val;
}

var myFuncB = function() {
var val = 1000;
return val;
}

console.log(myFuncA());
console.log(myFuncB());
console.log(myFuncA());
[/code]

結果

[code]
10
1000
10
[/code]

上記のサンプルコードからそっくり var を抜き取るだけで、出力結果が変化してしまう。

サンプルコード

[code]
var val = 10;

var myFuncA = function() {
return val;
}

var myFuncB = function() {
val = 1000;
return x;
}

console.log(myFuncA());
console.log(myFuncB());
console.log(myFuncA());
[/code]

結果

[code]
10
1000
1000
[/code]

myFuncB のスコープ内には val が存在しないため、スコープチェーンにより、外側の val に対し 1000 を代入することになり、myFuncB() の実行後の myFuncA() の結果は、最初の myFuncA() の結果とは異なる値が出力される。

今回の var に関連する項目としてクロージャがあります。どちらも JavaScript を理解する上では基本的なことなので、気になる方は JavaScript:これで脱初心者！レキシカルスコープとクロージャについてを合わせて読んでみてください。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Please share it!