JavaScriptのオブジェクトとは：ちゃんと理解してますか

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　以下のコードをみてください。JavaScriptのオブジェクトを作成した後、変数や関数を追加で代入しています。

    var obj = new Object();
    obj.v1 = "変数１";
    obj.f1 = function() {
        alert("関数１");
    };

　このようにJavaScriptのオブジェクトは、一度作成した後でも、変数や関数を自由に追加／削除することができます。これはJavaのように静的な型付けを持つ言語とは大きく異なる点です。

　上のコードを、「ハッシュテーブルに値を格納している」のと同義だと捉えてみましょう。すると、以下のようなキーと値の対応になりますね。

• v1 => "変数１"
• f2 => 無名関数

　これらを参照する場合は、通常通り「.（ドット）」演算子を用いることができます。

    // 変数「v1」の表示
    alert(obj.v1);
    // 関数「f1」の呼び出し
    obj.f1();

　さらに面白いのは、「[ ]」（大括弧）演算子を用いて、ハッシュテーブルの値（つまり、オブジェクトのメンバ）にアクセスすることができると言う点です。値の代入時、参照時のどちらでも「[ ]」を使うことが可能です。以下のコードをみてください。

    // 「f2」と言うキーの名前で関数オブジェクトを格納
    obj["f2"] = function() {
        alert("関数２");
    };
    // ドット演算子を用いた関数呼び出し
    obj.f2();
    // 大括弧を用いて関数を参照して呼び出し
    obj["f2"]();

　ここで、「[ ]」の中には「文字列」を指定します。一番最後の行では、文字列"f2"を用いてオブジェクトから関数オブジェクトを取り出し、後ろに「()」を付けることで関数呼び出しを行っています（この文章の意味が分からない方は前回の記事を参照してください）。

　どうですか？「[ ]」演算子を用いて、文字列でオブジェクトのメンバを代入／参照したりすると、「JavaScriptのオブジェクトはハッシュテーブルのようなもの」と言う言葉の意味が何となく実感できるのではないでしょうか。

　そして、「文字列によってメンバを参照できる」と言うのは非常に強力な機能ですので、必ず覚えておいてください。以下のコードを実行すると何が起きるでしょうか？

    var s1 = "al";
    var s2 = "ert";

    window[s1 + s2]("Hello, World");

まとめ

　今回は、JavaScriptのオブジェクトを「ハッシュテーブルのようなもの」として捉えることができる、と言うお話でした。次回は今回の話を踏まえつつ、JavaScriptオブジェクトについてのさらに高度な話題（オブジェクトリテラルやJSON）などのお話をしたいと思います。