N予備校Webアプリ入門や『ふりがなJavaScript』の本を読んでもよくわからなかった「オブジェクト」という概念について、『JavaScip本格入門』を読んだらすっきり分かったので自分なりにまとめる。
●オブジェクトとは配列の親戚！！！！
・配列リテラル
var seafood = ['イカ','タコ','エビ'];
console.log(seafood[0]); //イカ
console.log(seafood[1]); //タコ
console.log(seafood[2]); //エビ
この場合、seafoodという配列があり、
配列の中の、
「インデックス番号０」の「要素」はイカ
「インデックス番号1」の「要素」はタコ
「インデックス番号２」の「要素」はエビ
となっている。
配列における「キー」は「インデックス番号」なので、
console.log(配列名[インデックス番号]);
をすると、要素が表示される。
・オブジェクトリテラル
var animal = { x:dog, y:cat, x:rabbit };
console.log(animal.x); //dog
console.log(animal.y); //cat
console.log(animal.z); //rabbit
この場合、animalというオブジェクトリテラルがあり、
配列の中の
「オブジェクトx」の「プロパティ」はdog
「オブジェクトy」の「プロパティ」はcat
「オブジェクトz」の「プロパティ」はrabbit
となっている。
オブジェクト配列における「キー」は「オブジェクト名」なので、
console.log(オブジェクトリテラル名.オブジェクト名);
をすると、プロパティが表示される。
つまり、オブジェクトとは、「インデックス番号」の代わりに「要素」につけている名前のこと！
オブジェクトにおいては、「要素」は「プロパティ」と呼ばれる。
オブジェクトリテラルとは、値に名前をつけて管理している配列のこと。
●おまけ
『ふりがなJavaScript』を読んだ時点での自分の混乱ポイントと、『JavaScript本格入門』との相違点
【学習記録】『スラスラ読める JavaScriptふりがなプログラミング』読書感想 5章編 （最終章） 〜N予備校の復習を添えて ( https://qiita.com/Molly95554907/items/89018cdaaf8c56808651 )
上記のQiitaでの混乱ポイント
復習と疑問点の整理〜つまりオブジェクトって何〜
・consoleやdocumentのように、予め定められたオブジェクトがあり、logやquerySelectorのように予め定めたれたメソッドがある。（本書の１章、５章より）
document.querySelectot('h1')
ならば
documentがオブジェクト（機能と変数の集合体）
querySelectorがメソッド（機能）
'h1'がプロパティ（変数）
・一方で、オブジェクトとなる変数を自作して、その中にプロパティーと値を入れて複数のデータを一つにまとめるものがある。（本書の４章後半より）
let myfavoritebooks = {title:'関ヶ原'}
ならば
myfavoritebooksがオブジェクト（機能と変数の集合体）（だが「変数」でもある）
titleがメソッド（機能）（だが「プロパティ」でもある）
'関ヶ原'がプロパティ（変数）（だが「値」でもある）
・プログラムの中で果たしている役割に与えられる言葉が入れ替わってるような……！！ややこしい。そして結局のところ本質の理解に至ってない。いっぱい使って慣れるしかないのかな…！？"
「オブジェクト」のことを「機能と変数の集合体」、「プロパティ」を「変数」と考えるやり方を、『JavaScript本格入門』では取り入れていない（２章読了段階において）
オブジェクトは値につける名前、プロパティは値そのものをさす、という理解で覚えなおした。