知ってた？ナルホド！
2019.02.18
【新人コーダーがJavaScriptを習得する】vol.05 〜JavaScriptのオブジェクトとは〜
WRITTEN BY
|HIRAHARA NATSUMI
こんにちは！コーダーの平原です。
前回は、複数の値を変数に格納し管理することができる配列についてご紹介しました。
今回は、その配列の特徴と似た、オブジェクトについて学んでいこうと思います！
前回までの内容です。↓↓↓↓
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つの変数の中で、その変数にどのように関連するかをプロパティで指定できる為、配列よりもより細かな種別をすることができるのですね。
参考サイト :
