JavaScript初級講座

オブジェクトは配列とよく似ていますが、配列でインデックスにあたるものが「プロパティ名」となっています。

var オブジェクト名 = {
    プロパティ名1: 値1,
    プロパティ名2: 値2,
    プロパティ名3: 値3
};

配列と違い、[]が{}になっていますね。
また、値1, 値2ではなくプロパティ名: 値1となっています。

また、他のプログラミング言語を知っている方は連想配列が思い浮かぶかと思います。
JavaScriptには連想配列は無く、オブジェクトが連想配列の役割も持っています。

では、オブジェクトの機能を確認するため、SimpleJS.htmlのscriptタグに以下の内容を記述してプログラムを実行してみましょう。

var person = {
    name     : "田中太郎",
    birthday : "１月１日",
    gender   : "男性"
};
alert(person.name);     // 田中太郎と表示
alert(person.birthday); // １月１日と表示
        
// 変数にプロパティ名を代入して値を取得する事もできます
var propertyName = "gender";
alert(person[propertyName]); // 男性と表示
        
// 値の更新もできます
person.gender = "女性";
alert(person[propertyName]); // 女性と表示
// こちらでも可
person[propertyName] = "男性";
alert(person[propertyName]); // 男性と表示
        
// 新しくプロパティを追加する事もできます
person.pref = "東京";
alert(person.pref); // 東京と表示
// こちらでも可
propertyName = "age"; // 値を上書きして変数を再利用
person[propertyName] = "25";
alert(person[propertyName]); // 25と表示

オブジェクトは値に文字列や配列、オブジェクトに関数など、どのようなデータでも指定することができます。

var obj = {
    property1 : "ABC",
    property2 : 123,
    property3 : ["DEF", "GHI"],
    property4 : { childProperty : "hoge" },
    property5 : true,
    property6 : null,
    property7 : undefined,
    property8 : function() { alert("関数です！"); }
};
        
alert(obj.property1); // ABCと表示
alert(obj.property2); // 123と表示
alert(obj.property3[0] + obj.property3[1]); // DEFGHIと表示
alert(obj.property4.childProperty); // hogeと表示
alert(obj.property5); // trueと表示
alert(obj.property6); // nullと表示
alert(obj.property7); // undefinedと表示
obj.property8();      // 関数です！と表示