見出し画像

JS学習記録第4回 オブジェクトの使い方について

こんにちは。
JS学習記録の4回目!
今日はJSのオブジェクトについてまとめてみようかなと思います。
cssを普段使っている人には理解しやすいと思います!


オブジェクトとは・・・

オブジェクトとは関連のあるデータと機能の集合のことです。
簡単にいうと、cssでいうclassみたいなイメージでしょうか?(自分はそう感じました。)
言葉ではよく分からないのでコードを書いてみます!

const person = {
   name:'yuta',
   age:28,
   like:{
       food:'apple',
       place:'okinawa',
   },

}
console.lpg(person);

スクリーンショット 2021-12-26 12.59.55

上記のコードは、

personという変数名に、以下の情報が入っているということになります。

name→yuta
age→28
また新たにオブジェクトを設定することも可能です。
likeの中に、food→apple、place→okinawaの情報が入っています。

出力結果としては変数personの中に記述した情報が入っていることが確認されました。


特定の情報を取得したい時、変更したい時

上記ではconsole.log(person);
person内の全ての情報を取得したのですが、限定的に取得したり、変更することも可能です。

例えば、上記のコードでageの情報のみを取得したいときは、

const person = {
 name:'yuta',
 age:28,
 like:{
    food:'apple',
    place:'okinawa',
   },
   
 }
 
 console.log(person.age);

スクリーンショット 2021-12-26 13.06.59

console.log(person.age);というように、
person.age←変数personの中のageを取得する(.で繋げる)
という書き方をします。


変更するときは、、、

const person = {
   name:'yuta',
   age:28,
   like:{
       food:'apple',
       place:'okinawa',
   },

}
person.age = 27;
console.log(person.age);

スクリーンショット 2021-12-26 13.10.02

console.logの前に変更する記述を書きます。
person.age = 27;
(personの中のageを27に変更)


オブジェクト内にメソッドを追加

オブジェクトにはメソッドも追加することも可能です。

const person = {
   name:['yuta','tanaka'],
   age:28,
   like:{
       food:'apple',
       place:'okinawa',
   },

   Fullname: function(){
       console.log(this.name[0] + this.name[1]);
   }

};

person.Fullname();

上記のコードでは、
変数personに以下の情報が入っているということになります。
name→'yuta','tanaka'の配列
age→28
likeというオブジェクトに→food→apple, place→okinawa
そして、
Fullnameというメソッドを新しく作り、
その関数は変数person内のnameの1番目と2番目をconsole.logで出力する。
ここでいうthisはpersonを指します。

といった感じです。
変数personを記述後、
person.Fullname();を実行すると、
person内のname情報が取得できます!

スクリーンショット 2021-12-26 13.28.27


オブジェクトも記述しないと覚えられなさそうですね。。。
いろんなことを試しながら学習して行きます!








大阪在住の29歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。