JavaScriptの基礎：オブジェクトとは

オブジェクト・・・変数を入れる箱

オブジェクトの初期化

const person = {
      name: Tom,
      age: 20,
};

🔸　{ } の部分をオブジェクトリテラルと呼ぶ
{ }の中にプロパティ（またはキー）と値をコロン（：）で区切って格納する

//オブジェクトリテラル
const person = {

};

---

✍️ドット記法について

【オブジェクト名.プロパティ名】
→オブジェクトとプロパティをドットで繋ぐことでオブジェクトの値の取得・変更が出来る

🔹person オブジェクトの中の 『age』プロパティの値を取得できる

const person = {
  name: { first: "太郎", last: "独習" },
  age: 18,
};

console.log(person.age);
//値は『18』がとれる

🔹 値を変更したいときには代入演算子（ = ）で値を代入できる

const person = {
  name: { first: "太郎", last: "独習" },
  age: 18,
};

person.age = 20; // 18→20に値が変更できる

console.log(person.age);
//値は『20』がとれる

ドット（.) に続く記法は必ずプロパティ名を直接指定すること。
変数に格納して変数を指定するとエラーとなる。

※間違った記述例

const person = {
  name: { first: "太郎", last: "独習" },
  age: 18,
};

const prop = "name"; //`name`を変数に格納

console.log(person.prop); //変数を取得
//>undefindedとなる。

この場合、personオブジェクトのpropsプロパティを探しにいってしまう。

---

✍️ブラケット記法

ブラケット記法では、オブジェクトの後ろに[]を入れてその中に文字列でプロパティ名を記述する。
【オブジェクト名　["プロパティ名"]】

const person = {
  name: { first: "太郎", last: "独習" },
  age: 18,
};

console.log(person["age"]);
//『18』が取得できる

👀 ドット記法との違い

＊ブラケット記法は[ ]の中に変数を記述可能

const members = {
  member1: "太郎",
  member2: "二郎",
};

const keyBase = "member";// 変数に格納

console.log(members[keyBase + "1"]);　//変数を使ってプロパティの値を取り出している
// [keyBase + "1"]が文字列結合して『member1』となる。

メソッドとは

オブジェクトに保持される関数は、メソッドと呼びます。

let person = {
  hello: function () {　　　　//この箇所の関数を『メソッド』と呼ぶ
    console.log("こんにちは");
  }
};

person.hello();
// 出力結果：『こんにちは』

---

📕参考書
独習JavaScript 新版
🎥参考動画
【JS】ガチで学びたい人のためのJavaScriptメカニズム

---

✍️もりけん塾にてJavaScriptの基礎を学習中です☺️