学習したことのアウトプット
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におけるメソッドとはオブジェクトのプロパティに紐づけられた処理のこと、関数を用いて記述することができる。
※補足等ありましたらコメントいただけると幸いです。