JavaScript【 var 】 ～ グローバル変数と巻き上げ

JavaScript で変数を宣言する際に使用する var キーワードは、普段何気なく使用しているかもしれませんが、実は様々な意味を持っています。
今回は、JavaScript の var キーワードについて紹介します。

1. var とは

　
var は、JavaScript で 変数を宣言するときに使用するキーワードです。

次のように記述して使用します。

変数の宣言のみをする場合 と 変数の宣言と同時に初期値を代入する場合 のどちらにも、var キーワードを使用することができます。

また、次のように 1行で複数の変数を宣言することもできます。

var キーワードを 冒頭に1回だけ使用して、カンマで 区切りで 変数を複数宣言することができます。
　
　
JavaScript は、代入される値によって 変数の型が自動的に決まります。

ですので、文字列型の変数も 数値型の変数も、変数は全て var キーワードを使用して宣言することができます。

▲目次へ戻る

2. 関数内の var

　
関数を定義する際は、通常 function キーワードを使用して 次のように記述します。

function disp(){
    var str = "こんにちは！";

    return str;
}

alert(disp());

　
disp 関数は、文字列「 こんにちは！ 」を変数 str に代入して 返しています。
ですので、「 alert(disp()); 」を実行すると、「 こんにちは！ 」がアラート表示されます。
　
　
上のサンプルと同じ内容の関数を、var キーワードを使用して定義することもできます。

var キーワードを使用して関数を定義する際は、次のように記述します。

var disp = function(){
    var str = "こんにちは！";

    return(str);
}

alert(disp());

　
このような関数の定義方法を 関数式ともいいます。

上のサンプルは、変数 disp を作成して、その変数に関数を格納する構造になっています。

そして、disp 関数の返り値を alert メソッドの引数として代入しています。
　
　
関数式は、関数の名前を付けなくてもいいので、無名関数 とも呼ばれます。

この定義方法は、ある関数の返り値を 変数に代入したり 別の関数の引数として利用したりすることができるので、慣れると便利な記述方法です。

▲目次へ戻る

3. var を付けない変数

　
var キーワードを記述しなくても、変数の宣言をすることができますが、var キーワードを付けずに宣言された 変数は「 グローバル変数 」となります。

グローバル変数とは、プログラムのどの場所からでも使用できる変数のことです。

プログラムのどの場所からでも使用できるということは、想定しない場所で変数の値を変更されたりする危険性が高いことを意味します。

ですので、グローバル変数 の宣言はできるだけ避けた方が良いです。
　
　
次のソースコードをご覧ください。

var str = "こんにちは！";
 
function night(){
    var str = "こんばんは！";
}
 
night();
 
alert(str);

　
このソースコードを実行すると、「 こんにちは！ 」がアラート表示されます。

上のサンプルは、変数 str を night 関数の外でも 中でも 宣言しています。
どちらも var キーワードを使用して宣言しているため ローカル変数となり、night 関数内の 変数 str は night 関数内だけで利用できる変数となります。

ですので、関数の外で alert メソッドを実行すると、night 関数の外で宣言された変数str の値が表示されるという仕組みです。
　
　
今度は、var キーワード無しの変数を使用して記述してみます。

var str = "こんにちは！";
 
function night(){
    str = "こんばんは！";
}
 
night();
 
alert(str);

　
このソースコードを実行すると、「 こんばんは！ 」がアラート表示されます。

上のサンプルは、night 関数内で var キーワード無しの 変数 str を宣言して、値を代入しています。

var キーワード無しのため、night 関数内の変数 str は グローバル変数となり、関数の外で宣言した変数 str の値がここで変更されてしまいます。

ですので、アラート表示される文字列が「 こんばんは！ 」となってしまいます。
　
　
このように、関数の中と外に 同じ名前の変数があって、関数内の変数を var キーワード無しで宣言した場合は、関数実行後、どちらも同じ値となってしまうので注意が必要です。

▲目次へ戻る

4. 変数の巻き上げ

　
JavaScriptには、巻き上げ という概念があります。

次のソースコードをご覧ください。

alert(str);
 
var str = "こんにちは！";

alert(str); 

　
このソースコードを実行すると、「 undefined 」と「 こんにちは！ 」が続けてアラート表示されます。

上のサンプルは、変数 str を宣言する前に alert メソッドの引数として変数 str を使用しています。

このように、JavaScript では、変数を宣言する前でも その変数を使用することができます。
この仕組みが「 巻き上げ 」と呼ばれています。

これは、JavaScript が、var キ－ワードを使用して 関数内のあらゆる場所に変数を記述することができて、それが 必ず最初に評価される仕組みになっていることに起因します。

つまり、var キ－ワードを使用して 関数内のどこで変数宣言をしても、関数のはじめに宣言したのと同じように扱われるということです。
　
　
このような「 巻き上げ 」という JavaScript 特有の概念を知らずにソースコードを記述していると、意図しない結果となることもあります。

想定外の「 巻き上げ 」現象を発生させないために、変数宣言は、ソースコードの先頭 や 関数内の先頭 に記述するようにしましょう。

そうすることで、ソースコードも読みやすく、質の高いプログラムとなります。

▲目次へ戻る