kei615ykhm’s programming learning blog

プログラミングを0から学んでいる学生の備忘録

【学びの記録】JavaScriptの仕組みを言語化する⑤ - オブジェクト編

Keiです以下略

 

前回の【JavaScriptの仕組みを言語化する④ - イベント駆動プログミラング】にて、イベント伝播という概念を理解するためにはDOMを知る必要がありました。

 

しかし、DOMを理解するためにはオブジェクトという概念を理解する必要があるようでした…。

 

それではやっていきます。

 

 

オブジェクトとは

多くのプログラミング言語の基本的な概念であり、キーと値のペアの集合体。

オブジェクトを使うことによって、関連するデータと機能をひとつにまとめることが出来る。

簡単に言うと、human(人種)というオブジェクト(箱)があったとして、

・名前はKei

・性別は男性

・年齢は28歳

・職業は医療従事者

といった情報をひとつにまとめておけること。

 

オブジェクトの作り方

オブジェクトを作るには中括弧’{}’を使用し、この中に情報を「キー:値」の形で入れる。

キーは情報の名前(ここでいうkei)、値は情報の具体的な内容を指す。

 

例えば、

let human = {
  name: "kei",
  age: 28,
  sex: "男性"

};

「human(人種)」という名前のオブジェクトがあり、

「name(名前)」と「age(年齢)」と「sex(性別)」という情報が入っている。

 

オブジェクトから情報を取り出す

{}でオブジェクトにした中から特定の情報を取り出すには、

オブジェクトの名前に続けて「.(ドット)」の後ろに取り出す情報のキーを書く。

 

console.log(human.name); // "Kei" が表示される

console.log(human.age); // "28" が表示される

 

情報を更新する/新しい情報を追加する/削除する

オブジェクトの情報を更新したい場合:

ドット記法を使って新しい値を割り当てる。

 

human.age = 29; // Keiの年齢を29に変更

 

新しい情報を追加したい場合:

新しいキーを指定して値を割り当てる。

 

human.work = "医療従事者"; // 新しい情報として「医療従事者」を追加

 

削除したい場合:

オペレーター「delete」を使用する。

 

delete human.work; // 「医療従事者」の情報を削除

 

オブジェクトに機能を追加する

オブジェクトには情報(プロパティ)だけではなく、機能(メソッド)も追加できる。

例えば、「楽器の演奏をする」機能を追加してみる。

 

human.play = function() {
  console.log("楽器を鳴らす");
};

human.play(); // "楽器を鳴らす" と表示される

 

まとめ:カプセル化オブジェクト指向の要素の一つ)

JavaScriptにおけるオブジェクトとは、情報や機能をひとまとめにして管理をすることで様々なデータを組み合わせて使いやすくするための「箱」というイメージ。

これをカプセル化といい、オブジェクト内の詳細な情報を隠して外部からアクセスされることを防ぐことが出来る。

 

例えば、銀行口座の残高を直接変更することが出来ず、預け入れや引き出しを通じてのみ残高金額を変更することが可能になる仕組みを作れるということ。