2016/6/9更新

【JavaScript入門】JavaScriptの変数

JavaScriptにおける「変数」について説明します。変数は、JavaScriptにかぎらずプログラミングを行う際に理解しておかなければならないものです。

変数とは？

変数は、ある値を一時的に格納したり、計算結果を格納したりする入れ物です。

変数には、数字、文字列、関数など何でも入れることができますが、JavaScriptで変数を使用する場合は、使用する前に宣言する必要があります。

変数の宣言方法

JavaScriptの変数の宣言では、varというキーワードを使って var 変数名;のように宣言します。

変数名は必ず半角英数字で宣言する必要があります。また、ifや、switchといったJavaScriptの仕様で特別な意味を持つ「予約語」と呼ばれるものは使用できません。

下記の例では、iという変数を宣言しています。

var i;

var i;

JavaScriptは変数の中に入る型（数値、文字列など）を宣言する必要はありませんが、下記のように変数の宣言と初期値の設定を同時に行うことも可能です。

iという値を宣言し、初期値として100を設定しています。

var i = 100;

1	var i = 100;

複数の変数の宣言

変数を複数宣言したい時は var 変数名１, 変数名２, 変数名３;と記述します。

今度は、i, j, kという複数の変数を一度に宣言しています。

var i, j, k;

1	var i, j, k;

変数を使う

宣言した変数は、varを使わずに変数名だけで使用できます。

以下は、「Hello, world」という文字列を代入した変数greetingを宣言し、そのgreetingの内容をアラート表示するというサンプルです。

var greeting = "Hello, world";
alert(greeting);

1 2	var greeting = "Hello, world"; alert(greeting);

代入した値を表示すると、次のようにアラートが表示されます。

js-var

変数のスコープ

変数のスコープとは、その変数がどこから参照できるかを表す有効範囲のことです。変数のスコープは、変数がどこで宣言されたかによって変わります。

JavaScriptでは、グローバルスコープを持つグローバル変数とローカルスコープを持つローカル変数があります。

グローバル変数

グローバル変数とは、関数の外側で宣言された変数で、スコープの範囲はプログラム全体になります。

ローカル変数

ローカル変数とは、特定の関数の中で宣言された変数で、スコープの範囲は変数が宣言された関数の中だけになります。

グローバル変数とローカル変数の違い

グローバル変数とローカル変数の違いを具体的にプログラムで見てみましょう。

以下は、同じ名前の変数をグローバル変数とローカル変数としてそれぞれ宣言し、別々の値を設定し表示するサンプルコードです。

// グローバル変数の宣言
var sample = "グローバル変数"; 

function test() {
    // ローカル変数の宣言
    var sample = "ローカル変数"; 
    // ローカル変数の値を表示
    alert(sample);
}

alert(sample);
//=>「グローバル変数」と表示

// testを実行
test();
//=>「ローカル変数」と表示

// グローバル変数の宣言

var sample = "グローバル変数";

function test() {

// ローカル変数の宣言

var sample = "ローカル変数";

// ローカル変数の値を表示

alert(sample);

}

alert(sample);

//=>「グローバル変数」と表示

// testを実行

test();

//=>「ローカル変数」と表示

グローバル変数に設定した値はプログラム全体で有効ですが、ローカル変数に設定した値は関数の中でのみ有効ということが分かります。

JavaScript