知ってた?ナルホド! BLOG

2019.02.18

【新人コーダーがJavaScriptを習得する】vol.05 〜JavaScriptのオブジェクトとは〜

WRITTEN BY

 | 

HIRAHARA NATSUMI

【新人コーダーがJavaScriptを習得する】vol.05 〜JavaScriptのオブジェクトとは〜

1. オブジェクトとは

オブジェクトとは、複数のプロパティを持つ値のまとまりです。
それぞれのプロパティには値が格納されており、配列と同様に、複数の値を1つにまとめ、1つの変数として扱うことができます。

2. オブジェクトの作成

オブジェクトを作成するには、「{}」を使用します。配列の場合は「[]」でしたね。
プロパティ名と値は「:」で区切り、プロパティ(プロパティ名:値)は「,」で区切ります。

let favorite = {}; //プロパティ数が0個のオブジェクトを変数に格納する
let favorite = {color:'緑', food:'たこ焼き', drink:'ビール'}; //複数のプロパティを持つ値を変数に格納する

3. オブジェクトの値の取得

配列から値を取得する場合は、配列のインデックスを使用しました。
オブジェクトの場合は、インデックスが割り振られない為、代わりにプロパティ名を使用します。
オブジェクトから値を取得するには2つの方法があります。

let favorite = {color:'緑', food:'たこ焼き', drink:'ビール'};
console.log(favorite.color); //緑 が返されます。
console.log(favorite['color']); //緑 が返されます。

2番目の方法では、プロパティ名を「[]」と「”」で囲み、文字列として指定します。

4. オブジェクトの値の変更

オブジェクトの値の変更は以下のように行います。
オブジェクトの値の取得と同様、2つの方法で値の変更を行うことができます。

let favorite = {color:'緑', food:'たこ焼き', drink:'ビール'};
favorite.color = '赤';
console.log(favorite.color); //赤 が返されます。
favorite['color'] = '赤';
console.log(favorite['color']); //赤 が返されます。

5. オブジェクトの値の追加

オブジェクトの値を追加したい場合は、オブジェクト名(変数名)と、追加する値を持つプロパティ名を指定し、指定したプロパティに値を格納します。

let favorite = {color:'緑', food:'たこ焼き', drink:'ビール'};
favorite.animal = '犬';
console.log(favorite); //color:緑, food:たこ焼き, drink:ビール, animal:犬が返されます。
favorite['animal'] = '犬';
console.log(favorite); //color:緑, food:たこ焼き, drink:ビール, animal:犬が返されます。

6. まとめ

オブジェクトでは、配列と同様に、複数の値を1つの変数にまとめ、取得・変更・追加することができました。
しかし、オブジェクトにはインデックスが無く、記述方法には大きな違いがありました。
1つの変数の中で、その変数にどのように関連するかをプロパティで指定できる為、配列よりもより細かな種別をすることができるのですね。

参考サイト :

PAGE TOP