課題
JavaScriptで関数を記述する際、「巻き上げ」という問題が発生する。「巻き上げ」とは、関数の内部で宣言した変数が記述されている場所に関係なく、関数の先頭で宣言されたのと同じように扱われることである。JavaScriptでは、ある関数の中で変数を宣言している箇所よりも前でその変数を使うとその変数の値は"undefined"となり論理上のエラーとなる。
【巻き上げの例】
myname = "global"; // グローバル変数
function func() {
alert(myname); // グローバル変数を参照するかと思えば、結果は"undefined"となる
var myname = "local";
alert(myname); // "local"
}
上記の関数:funcは以下のコードと同じ意味になる
myname = "global"; // グローバル変数
function func() {
var myname; // "var myname = undefinedと同じ
alert(myname); // "undefined"
myname = "local";
alert(myname); // "local"
}
上記のような問題を解決するにはどうしたらよいのだろうか。
解決方法
「JavaScriptパターン――優れたアプリケーションのための作法」の「２章 必須パターン」に記述されている単独varパターンを使用する。
なぜ、単独varパターンがよいのか
「単独varパターン」とは、関数の先頭でvarを一つだけ記述し、関数の中で使用する全ての変数をそこで宣言するパターンである。つまり、関数の中で使用する変数は先頭以外の箇所では宣言しないことをルール化したパターンである。
JavaScriptでは「巻き上げ」により関数の中で宣言した変数を関数の先頭で宣言したものと見なしてしまうので、自発的に関数の先頭に変数を宣言しておけば論理上のエラーはなくなる。そういった意味で「単独varパターン」を利用することが「巻き上げ」の問題を解決する良い方法になる。
また、「単独varパターン」には「巻き上げ」の問題を解決する以外にも
- その関数で必要なすべての変数が１カ所にまとまっているので、関数の中でどんな変数が使われているのかが一目でわかる。
- varを書く回数が減るので、ファイルサイズを少なくできる。その結果、JavaScriptのコードを記述したHTMLやJavaScriptのファイルの転送時間を短縮することができる。
と言ったメリットがある。
どのようにコーディングするのか
関数の先頭でvarを記述し、そこで複数の変数をカンマで区切って宣言する。その際に初期値で変数を初期化しておくのが良い。
【単独varパターンの例】
function func() {
var a = 1,
b = 2,
sum = a + b,
obj = {};
}