javascriptの変数と関数でのスコープ範囲の落とし穴

2015年08月15日 · jQuery

javascriptやjQueryを変数を使いガリガリとプログラミングしている途中で関数で処理をまとめたりしますよね？
私は自身はボキャブラリーがない為どうしても同じ単語を使ったりしてしまうのですが、
とある資料を作るっている中でスコープの範囲を調べていたらとあることに気がつきました。

それは、関数内でも関数外で定義した変数が参照できてしまうことです。
※気づいている方もいらっしゃるかもしれませんが・・・
スコープ範囲を理解できるように今回はメモしておきたいと思います。

グローバル変数とローカル変数

まずは以下のような動作のもを作ってみました。

var num = 2;
function add(){
	num++;
}
console.log("1:"+num);
add();
console.log("2:"+num);

理想の結果では、
add関数の「num」はローカル変数になるのでグローバル変数の「num」には影響がないと考え
consoleが１つめのは２
consoleが２つめのも２
どちらも変わらないものと思っていたのですが、結果は・・・・

consoleが１つめのは２
consoleが２つめのは３
という結果となりました。

関数addのnumがローカル変数にならず、グローバル変数のままとなり計算してしまったのです
上記の書き方をしてしまうと予期せぬ形でグローバル変数が変わってしまうこともあるので気をつけましょう

ローカル変数を動作させる場合

先ほどのスクリプを少し改良します。

var num = 2;
function add(){
	var num=10;
	num++; 
}
console.log("1:"+num);
add();
console.log("2:"+num);

処理の結果は
consoleが１つめのは２
consoleが２つめのも２
といういう結果となりました。

関数add内にnum変数にvar付きで定義をおこないました。
定義をおこなうことで、ローカル変数とグローバル変数で別物として認識するようになり、
consoleの結果が同じものととなりました。

以下のような処理も注意が必要です。

var num = 2;
function add(){
	num=10;
	num++; 
}

このような形にしてしまうと、numの２が関数を実行した後にnumが10と上書きされてしまいます。

まとめ

関数内でグローバル変数と同じ変数名を使うとグローバル変数の内容が上書きされてしまう。
関数内で同じ変数名を使う場合は「var」の定義をすることでローカル変数と認識され、グローバル変数に上書きされないようになるということです。

web-wizardry

インターネット・スマホ、そしてテレビにwebの魔法をWizardry