【JavaScript】オブジェクトとは？プロパティの参照方法/連想配列との違い

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『オブジェクト』について、『プロパティの参照方法』『連想配列との違い』」を紹介します。

ぜひ本記事を参考にしてください。

オブジェクトとは

『オブジェクト』とは、1つのモノを表現する複数情報（プロパティ）の集合体のことです。

そして、『プロパティ』とは『名前（key）』と『値（value）』がセットになったものを指します。

オブジェクトの記載方法

オブジェクトの記載方法は以下の通りです。

//オブジェクトの記載方法

変数名={
　　プロパティ名1:値1,
　　プロパティ名2:値2,
　　プロパティ名3:値3
}

//オブジェクトの記載方法

変数名={
　　プロパティ名1:値1,
　　プロパティ名2:値2,
　　プロパティ名3:値3
}

オブジェクトの記載例

以下がオブジェクトの記載例ですが、ここではPCを例に記載します。
表現するのは以下のPCです。
そうです、何を隠そう私の現在のPCですね。

• メーカー：DELL
• 色：シルバー
• 価格：100,000

//オブジェクトの記載例

let pc={
	maker:’DELL’,
	color:’silver’,
	price:100000
}

//オブジェクトの記載例

let pc={
	maker:’DELL’,
	color:’silver’,
	price:100000
}

上記オブジェクトにおける『maker:”DELL”』『color:”silver”』『price:100000』がプロパティとなります。

オブジェクトのプロパティを参照するには？

オブジェクトにおける個々のプロパティを参照するには、『ドット演算子』『ブラケット構文』のどちらかを使用します。

ここでは、前項と同じPCオブジェクトを参照してます。

■ドット演算子の記載方法

//ドット演算子の記載方法

オブジェクト名.プロパティ名

//ドット演算子の記載方法

オブジェクト名.プロパティ名

■ブラケット構文の記載方法

//ブラケット構文の記載方法

オブジェクト名[‘プロパティ名’]

//ブラケット構文の記載方法

オブジェクト名[‘プロパティ名’]

■記載例

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

//ドット演算子
console.log(pc.maker);
//実行結果：DELL

//ブラケット構文
console.log(pc["maker"]);
//実行結果：DELL

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

//ドット演算子
console.log(pc.maker);
//実行結果：DELL

//ブラケット構文
console.log(pc["maker"]);
//実行結果：DELL

『ドット演算子』『ブラケット構文』、どちらの記載方法でもmakerプロパティの『DELL』値を参照できているのが分かりますね。

連想配列とオブジェクトの違いは？

「なんかオブジェクトって連想配列と似てない？何が違うの？」そう思われた方、鋭いです。

JavaScriptにおいて、『連想配列』『オブジェクト』は同一の概念ですが、同じ名前付きの配列でも言葉としての意味合いは異なります。

『連想配列』は個々の要素が主体である一方、『オブジェクト』はモノ全体が主体となります。

基本的には同一のものであると理解すればよいですが、言葉としての意味合いの違いは理解しておきましょう。

まとめ

以上が「JavaScriptにおける『オブジェクト』について、『プロパティの参照方法』『連想配列との違い』」でした。

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

タカヒデ

ITを楽しく勉強中

X

通信会社の企画職で働く30代 非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中 IT初心者が楽しいと思えるように発信することを目指しています ↓Xもやっているのでフォローしてね