【JavaScript】オブジェクト① 〜オブジェクトの作成・プロパティへのアクセス〜

# 概要
...[【JavaScript】オブジェクト②](https://qiita.com/andota05/items/e915126dfce7573e4330)もあります。

JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* オブジェクトとは
* オブジェクトの作成方法
* オブジェクトが持つプロパティへのアクセス方法

# オブジェクト

* オブジェクトとは、`プロパティの集合`のこと。
* 1つのオブジェクトで`複数のプロパティ`を持つことができる。
* JavaScriptには、あらゆるオブジェクトのもとになる`Object`というビルドインオブジェクトがある。

>**プロパティとは**
名前(キー)と値(バリュー)が対になったもの。

>**ビルドインオブジェクトとは**
JavaScriptの実行環境にあらかじめ組み込まれている、基本的な機能を提供するためのオブジェクトのこと。

```js
// オブジェクトの例
const obj = {
   // この場合"name"が「キー」で"Taro"が「バリュー」 <- これをプロパティと呼ぶ
   "name" : "Taro"
};
```

# オブジェクトを作成する
* 作成には`オブジェクトリテラル { }`と呼ばれるものを使用する。
* オブジェクトリテラルでは、`初期値としてプロパティ`を持つことができる。

```js
const obj = {
  // プロパティ
}
```

## オブジェクトのプロパティ
* プロパティは、`オブジェクトリテラル { }`の中に名前と値を`キー : バリュー`の形式で記述する。
* プロパティの`名前(キー)には文字列またはSymbol`が利用可能。
* プロパティの`値(バリュー)には任意のデータ`を指定可能。

>**Symabol(シンボル)とは**
>ES2015(ES6)から新たに導入されたSymbol( )関数で作成できる特殊な値。
>(プリミティブデータ型の１つ)

```js
// objという名前のオブジェクトを作成
const obj = {
  // "キー" : "バリュー"でプロパティを指定
  "name" : "Taro", // プロパティを複数指定する場合は、「,」カンマで区切る
  "age" : 24
}

console.log(obj); // => {name: 'Taro', age: 24}
```

## 【Tips】 オブジェクトのプロパティについて
* オブジェクトリテラル内の`プロパティ名(キー)`は`クォート(' or  ")を省略可能`
* ただし、JavaScriptの`(変数名や関数名などの)命名規則に反するプロパティ名`はクォートが必要。
* `プロパティの値(バリュー)`に変数名を指定すれば、対象の変数の値を参照可能。
* `ES2015`からは、プロパティ名と値に指定する変数名が同じ場合は`{ lang }のように省略可能`。

```js
// 変数city,langを定義し値を設定
const city = "tokyo";
const lang = "japanese";

const obj = {
    "name": "Taro",
    age: 24,                       // => これはOK
    e_mail: "sample@mail.com",     // => これもOK
    // e-mail: "sample@mail.com",  // => これはNG 命名規則に反しているためエラーになる
    "e-mail": "sample@mail.com",   // => なのでクォートで囲う必要あり
    city: city,                    // => 変数を指定可能 
    lang                           // => キーと変数名が同じなので省略可能
}

console.log(obj);
// => {name: 'Taro', age: 24, e_mail: 'sample@mail.com', e-mail: 'sample@mail.com', city: 'tokyo', lang: 'japanese'}
```

# 【Tips】 オブジェクトリテラルとnew Object()
* オブジェクトリテラル(`{ }`)は、`Object(ビルトインオブジェクト)`のオブジェクトである。
* また、Objectを元に`新しいオブジェクトを作成するための構文`という捉え方ができる。
* 別途、`new演算子`を使用し、Objectから新しいオブジェクトを作成する方法もある。
* オブジェクトリテラル(`{ }`)の簡潔さと比較すると、`new Object()`を使う利点はあまりない様子。

```js
// new演算子を使用してオブジェクトを作成してみる
const obj = new Object();

console.log(obj);  // => {}(空のオブジェクトが作成された)
```

# プロパティへのアクセス
オブジェクトのプロパティへのアクセス方法としては以下のような方法がある。

* ドット`(.)`記法を用いる方法
* ブラケット`([ ])`記法を用いる方法

## ドット( . )記法を用いる方法
*  ドット記法を用いる場合、前提としてプロパティ名は`変数定義と同様の命名規則`に沿ったものでなければ指定できない。

```js
const obj = {
    name: "Taro",
    age: 24,
    e_mail: "main@mail.com",
    "sub-mail": "sub@mail.com",
}

// オブジェクト「obj」のnameをドット記法で指定
console.log(obj.name);
// => Taro

// オブジェクト「obj」のsub-mailをドット記法で指定
console.log(obj.sub-mail);
// => 命名規則に反しているためエラーになる(次項のブラケット記法では可能)
```

## ブラケット([ ])記法を用いる方法
* ブラケット記法を用いた場合、プロパティ名は`暗黙的に文字列`へと変換される。
* プロパティ名に変数を使用できる。
* プロパティ名を指定する場合は、`クォート`で囲う必要がある。

```js
const obj = {
    name: "Taro",
    age: 24,
    e_mail: "main@mail.com",
    "sub-mail": "sub@mail.com",
}

// 変数「myName」定義し、文字列「name」を代入
const myName = "name";

// オブジェクト「obj」のプロパティをブラケット記法で変数myNameを指定
console.log(obj[myName]); // => obj["name"]と指定したのと同じ
// => Taro

// オブジェクト「obj」のsub-mailをブラケット記法で指定
console.log(obj["sub-mail"]);
// => sub@mail.com
```

# 【Tips】 オブジェクトのプロパティを変数に代入、管理
* アクセスする際 `オブジェクト.プロパティ名` と何度も書くのは冗長なため、変数に代入することで再利用することができる。

```js
const obj = {
    "name": "Taro",
    "age": 24,
    "e_mail": "main@mail.com",
    "sub_mail": "sub@mail.com",
    "sub-mail": "sub@mail.com",
}

// 変数「name」を定義し、オブジェクト「obj」のプロパティ「name」を代入
const name = obj.name;

// 「obj.name」が代入されている変数「name」を指定
console.log(name);
// => Taro
```

# 分割代入
* オブジェクトリテラルのような構文を用いて変数名を定義し、オブジェクトからプロパティを代入することも可能。
* なお、定義する変数名は、オブジェクトの`プロパティ名と紐づける`必要がある。
* この方法は`分割代入`と呼ばれ、`ES2015`から対応している。

```js
const obj = {
    name: "Taro",
    age: 24,
    e_mail: "main@mail.com",
    sub_mail: "sub@mail.com",
    // "sub-mail": "sub@mail.com", // sub-mailは命名規則に反しているため分割代入の変数定義時にエラーとなる
}

// オブジェクト「obj」からプロパティを取り出す
// 試しに順番を一部変更し、正しく紐づいているか確認
const { name, e_mail, age, sub_mail } = obj; 

// 分割代入した変数「name」を指定
console.log(name);
// => Taro

// 分割代入した変数「e_mail」を指定
console.log(e_mail);
// => main@mail.com
// => 変数定義時に順番を一部変更したが、オブジェクトのプロパティが正しく紐づいている
```