JavaScriptでオブジェクトを作る、値を読み込む方法

オブジェクトは複数のプロパティを持つ変数です。ここではオブジェクトの作り方、その用途について解説していきます。

オブジェクトの使い方

//JavaScript
function objectTest(){
const ob = {
    name: "test",
    point: 10,
    survive: true
};
}

オブジェクトを作るには、{}で閉じた中にプロパティ名（キー）と値を,で区切って指定します。変数の型として文字列、数字、ブール値を使用しています。

//JavaScript
function objectTest(){
const ob = {
    name: "test",
    point: 10,
    survive: true
};
alert(ob.point);
}

オブジェクトの値は、プロパティごとにオブジェクト名.プロパティという構文で取得・代入できます。つまり、インデックス名に名前のある配列のような使い方ができます。

click me!

実行すると、

オブジェクトobのプロパティpointが取得されることが確認できます。

//JavaScript
function objectTest2(){
const ob = {
    name: "test",
    point: 10,
    survive: true
};
alert(ob);
}

配列とちがい、オブジェクトはオブジェクト名だけで値を取得することはできません。

click me!

こちらも実行すると、

オブジェクトの中身が表示されないことが確認できます。

//JavaScript
alert(ob["name"]);

オブジェクトの値は、オブジェクト名["プロパティ"]という構文でも取得できます。

//JavaScript
function objectTest3(){
const ob = {
    name: "test",
    point: 10,
    survive: true
};
let nm = "name";
alert(ob[nm]);
}

オブジェクト名[変数]として、プロパティを変数で指定することも可能です。

click me!

実行すると、

変数経由でオブジェクトのnameプロパティの値が取得できていることが確認できます。

//JavaScript
function objectTest4(){
const ob = {
    name: "test",
    point: 10,
    survive: true
};
ob.point = 5;
alert(ob.point);
}

プロパティの値を書き換えたい場合は、オブジェクト.プロパティに直接値を代入することができます。

click me!

実行すると、

プロパティの値が上書きされていることが確認できます。