【JavaScript】オブジェクトの書き方について

Reactの学習を始めてふと疑問に思ったのが、以下のような書き方。

const user = {
 name:'tanaka',
 mail:'tanaka@takashi',
 age:20
}

上記は「オブジェクト」の書き方です。

本記事では、「オブジェクトの書き方、使い方」に関してまとめます。

React,JavaScript初学者のためになれれば幸いです。

JavaScriptでは、複雑な情報をまとめて扱うのに「オブジェクト」というものが多用されます。「オブジェクト」は、さまざまな値や処理（関数）をひとまとめにして扱えるようにしたプログラムのかたまりです。Reactでは、オブジェクトを使わないと何もできないと言われるくらい多用されているらしいです。

オブジェクトの書き方

基本的な書き方は以下の通りです。

｛
    プロパティ１:値１,
    プロパティ2:値２
}

「プロパティ」と「値」の組み合わせをコンマで区切り記述します。オブジェクトのプロパティにはさまざまな値が代入でき、関数も入れることができます。

オブジェクトの値のやり取りは、以下のように記述できます。

オブジェクト.プロパティ = 値
変数 = オブジェクト.プロパティ

オブジェクトの使い方

//(例)
const user = {
 name:'tanaka',
 mail:'tanaka@takashi',
 age:20
}

// 上記のオブジェクトの中身にアクセスする（オブジェクトの値のやり取り）
console.log(user.name);
console.log(user.mail);
console.log(user.age);
// オブジェクト全体を表示する
console.log(user);


// オブジェクトの値には、配列を持たせる
const ob = {
  books: ["Onepice", "Kimetu", "Shingeki"],
};

// オブジェクト内のプロパティの配列にアクセスする
console.log(ob.books[0]);
console.log(ob.books[1]);
console.log(ob.books[2]);

// オブジェクトの値に、さらにオブジェクトを持たせる
const users = {
  tanaka: {
    mail:'tanaka@takashi',
    age: 20
    likeFoods: ["banana","apple"]
  },
  satou: {
    mail:'satou@mitukuni',
    age: 22
    likeFoods: ["beef","chiken"]
  },
};

console.log(users.tanaka);
console.log(users.tanaka.likeFoods);
console.log(users.tanaka.likeFoods[0]); //出力:banana

//オブジェクトの値に、メソッド（関数）を入れる

const user = {
 name:'tanaka',
 mail:'tanaka@takashi',
 age:20
 greet: function(){
   return "こんにちは" + this.name + "です"
  }
}

console.log(user.greet()); //出力:こんにちはtanakaです。

//メソッドのfunctionを省略。
const user = {
 name:'tanaka',
 mail:'tanaka@takashi',
 age:20
 greet(){
   return "こんにちは" + this.name + "です"
 }
}