JavaScriptの変数とスコープ―変数の宣言と代入からグローバル変数、ローカル変数など

JavaScriptの変数とスコープについてまとめています。変数の宣言と代入からグローバル変数、ローカル変数など表やサンプルも用いて解説しています。

▲記事トップへ

1. 変数とは

変数とは、プログラム実行時にデータを保存できる名前付きのメモリ領域のことです。

名前付きのメモリ領域といいましたが、説明の仕方によっては、データを保管する箱と表現することがあります。説明の仕方はいろいろあると思いますが、変数はコンピュータのメモリの一部の領域を割り当てた名前付きの箱あるいは名前付きのメモリ空間です。

変数を使用することで、データを保管したり操作することができます。プログラミングするうえで欠かせない存在の１つになります。

2. JavaScriptの変数

JavaScriptの変数には、大きくグローバル変数とローカル変数があります。ここでは、JavaScriptの変数の宣言と代入など基本操作、グローバル変数とローカル変数について見ていきます。

変数の宣言と代入

まずは、JavaScriptの変数の宣言と代入、変数初期化について見ていきます。

変数の宣言

JavaScriptで変数を利用するには、はじめに変数の宣言を行う必要があります。変数を宣言するには「var」キーワードを使用して以下のように記述します。

var ＜変数名＞;

変数への値の代入

変数に値を設定することを代入といいます。代入の例は以下になります。

＜変数名＞ = ＜値＞;

変数初期化

変数の宣言と同時に値を設定することもできます。宣言と同時に値を設定して、変数に初期値を設定することを変数初期化といいます。その場合は以下のように記述します。

var ＜変数名＞ = ＜値＞;

3. JavaScriptの変数の種類

冒頭でも触れましたが、JavaScriptの変数には、グローバル変数とローカル変数があります。

グローバル変数

関数やブロックの外側で宣言された変数で宣言された変数をグローバル変数といいます。スコープがプログラム全体になり、プログラムのどこからでも参照できます。

var ＜変数名＞;

ローカル変数

関数の内部で宣言された変数で宣言された変数をローカル変数といいます。スコープが宣言された関数やブロック内になり、その範囲でしか参照できない変数になります。

function hoge() {
    var ＜変数名＞;
}

4. グローバル変数とローカル変数のスコープ

スコープという言葉が既に出てきていますが、プログラム内で変数やメソッドを利用できる範囲を「スコープ」といいます。

大きなプログラムを記述するにはこのスコープが重要になってきます。モジュールの結合度という言葉がありますが、モジュール結合度を可能な限り弱く設計しないと、こっちを変えたら気づかないところも変わったなど扱いにくいプログラムになります。

ここでは、JavaScriptのグローバル変数とローカル変数のスコープについて見ていきます。 JavaScriptのグローバル変数とローカル変数の対応は次の通りです。

JavaScriptのグローバル変数とローカル変数のスコープ"
種類	スコープ	宣言方法
グローバル変数	ファイル内外	ブロック外で宣言（例　a = 1; または var a = 1;）
ローカル変数	ブロック内	ブロック内で宣言（例　a = 1; または var a = 1;）

5. JavaScriptのグローバル変数とローカル変数のスコープを確認するサンプル

最後にJavaScriptのグローバル変数とローカル変数のスコープを確認するサンプルを動かしてみます。

サンプルソース

JavaScriptの関数内外×var有無の8パターンの挙動を確認するサンプルです。エラーになる部分はコメントアウトしています。確認する際はコメントを外してください。

<html>

<script type="text/javascript">
function printVal(val){
    document.write(val + "<br />");
}

var globalA = "グローバルA：ブロック外でvarあり";
globalB = "グローバルB：ブロック外でvarなし";

function getGlobalA() {
    return globalA + "（関数返却値）";
}

function getGlobalB() {
    return globalB + "（関数返却値）";
}

function getLocalA() {
    var localA = "ローカルA：ブロック内でvarあり";
    return localA + "（関数返却値）";
}

function getLocalB() {
    var localB = "ローカルB：ブロック内でvarあり";
    return localB + "（関数返却値）";
}
</script>

<body>

<script type="text/javascript">
printVal(globalA);
printVal(globalB);
// printVal(localA); エラー（ReferenceError: localA is not defined）
// printVal(localB); エラー（ReferenceError: localB is not defined）
printVal(getGlobalA());
printVal(getGlobalB());
printVal(getLocalA());
printVal(getLocalB());
</script>

</body>
</html>