[JS]JavaScriptにおけるオブジェクトの概念

学習したことのアウトプット

JavaScriptを学習してると「オブジェクト」やら「メソッド」という言葉がガンガン出てきます。その度に、そもそもなんぞや？と思ってしまっていたので、少しでも情報を整理するために記事にしてみたいと思いまして。

JavaScriptにおけるオブジェクトの概念

JavaScriptにおけるオブジェクトとは、データや処理といった情報を1つにまとめた集合体です。
例えば、以下のような情報があるとして

データ	処理
名前：ヤマダ	歩く
性別：男性	食べる
年齢：25歳	話す

これらの情報を「human」等として1つにまとめると、オブジェクトが出来上がります。

プロパティ

上のイメージ図の「データ」にあたる部分。
ハッシュ形式（キーとバリューの組み合わせ）で書かれる値のことで、オブジェクトの要素（中身）を決める役割をします。つまり、「オブジェクトは、プロパティの集合体から成り立っている」と言うことができます。

プロパティの書き方

変数名 = {キー: バリュー} 
         //ハッシュ部分がプロパティ

【例】オブジェクトとプロパティ

let human = { 
  name: "yamada",
  gender: "man",
  age: 25,
 }

プロパティの値を取得する

オブジェクト名.プロパティ名のように記述することで、オブジェクトのプロパティの値を取得することができます。

例

let human = { name: 'yamada' }

console.log(human.name) // => yamada

プロパティを追加する

方法は以下の2つ
①オブジェクト.プロパティに値を代入する
②オブジェクト['プロパティ']に値を代入する

例

let human = { name: 'yamada' }
console.log(human)

human.age = 25 //①
human['address'] = 'Tokyo' //②

console.log(human) // => { name: 'yamada', age: 25, address: 'Tokyo' }

プロパティの値を変更する

追加の時と同じく
①オブジェクト.プロパティに値を代入する
②オブジェクト['プロパティ']に値を代入する
で変更ができます。

例

let human = {
  name: "yamada",
  age: 25,
  address: 'Tokyo'
}

console.log(human.name) // => yamada
console.log(human.age)  // => 25

//以下で変更している
human.name = "yabe"
human['age'] = 30

console.log(human.name) // => yabe(変更されている)
console.log(human.age) // => 30(変更されている)

(JavaScriptにおける) メソッド

最初のイメージ図における「処理」にあたる部分で、プロパティに紐づけられた処理のことを指します。プロパティには、「〇〇をしてほしい」という処理を関数を用いることで代入できます。

メソッドの書き方

変数名 = {
  //ここにプロパティが記述されている状態
  メソッド名: function(){...}
}

【例】オブジェクトのメソッド

let human = {
  name: "yamada",
  age: 25,
  address: 'Tokyo',

  talk: function(){
    console.log(`私の名前は${human.name}、${human.age}歳です。住所は${human.address}です`)
  }
}

// talkメソッドを実行

human.talk()  //=> 私の名前はyamada、25歳です。住所はTokyoです

humanオブジェクトの中にtalkというメソッドを定義しました。このメソッドの役割はconsole.logを用いて、記述した文字列をコンソール上に表示することです。human.talk()という記述でメソッドが実行され、talkメソッドの処理が実行されます。

まとめ

・JavaScriptにおけるオブジェクトとは、データや処理といった情報を1つにまとめた集合体。
・JavaScriptにおけるプロパティとはオブジェクトのデータにあたるもので、ハッシュを用いて記述することができる。
・JavaScriptにおけるメソッドとはオブジェクトのプロパティに紐づけられた処理のこと、関数を用いて記述することができる。

　

※補足等ありましたらコメントいただけると幸いです。