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

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

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

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

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

var ありの場合

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

サンプルコード
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());
結果
10
1000
10

var なしの場合

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

サンプルコード
var val = 10;

var myFuncA = function() {
    return val;
}

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

console.log(myFuncA());
console.log(myFuncB());
console.log(myFuncA());
結果
10
1000
1000

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

まとめ

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

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents