トップ 言語 JavaScript 基礎編 文法 変数とスコープ

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

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

変数とは

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

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

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

JavaScriptの変数

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

変数の宣言と代入

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

変数の宣言

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

var <変数名>;

変数への値の代入

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

<変数名> = <値>;

変数初期化

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

var <変数名> = <値>;

JavaScriptの変数の種類

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

グローバル変数

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

var <変数名>;

ローカル変数

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

function hoge() {
    var <変数名>;
}

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

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

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

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

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

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>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

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

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴

スポンサーリンク