あなたの知っているJavaScriptはもう古い(書き方編 -その2- )

## 前回のおさらい
前回はJavaScriptの新しい書き方の基礎を学んでみました。
今回はさらに突っ込んだ新しい書き方を学んで行きます。

https://qiita.com/k-tetsuhiro/items/9900665f200f0ca77e96


## 分割代入
昔の書き方では**objectに対して要素をとり方出す**ときに、こんなやり方をしていたと思います。

```sample.js
var personObject = {
    name: "タロウ",
    age: 20,
};

// 私の名前はタロウです。年齢は20歳です。
var message = `私の名前は${personObject.name}です。年齢は${personObject.age}歳です`;
```
この書き方だと毎回`personObject`を書かないといけないので効率がとても悪いです。
そこで、分割代入を使用します。

```sample.js
const personObject = {
    name: "タロウ",
    age: 20,
};

// 分割代入
const { name, age } = personObject;

// 私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${name}です。年齢は${age}歳です`;
```

constで定義するときに、`{}`をつかうことで**objectから一致するものを取り出す**ことができます。
今回はnameとageを指定したので、personObject.nameとpersonObject.ageがそれぞれ取り出されて代入されました。もちろん**存在しないプロパティを指定するとエラー**になります。
ちなみに、一部を取り出すこともできるし、順番は関係なく取り出せます。

```sample.js
const personObject = {
    name: "タロウ",
    age: 20,
};

// 分割代入
const { name, age } = personObject;

//　nameだけ取り出すことができる
const { name } = personObject;

// 順番は関係ない
const { age, name } = personObject;
```

好きな名前で変数を取り出すこともできます。

```sample.js
const personObject = {
    name: "タロウ",
    age: 20,
};

// 好きな名前で分割代入をする
const { name: personName, age: personAge } = personObject;


// 私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${personName}です。年齢は${personAge}歳です`;
```

## 配列の分割代入
objectと同様にararyに対しても分割代入ができます。
まずは昔の書き方をみていきましょう。

```sample.js
var personArray = ["タロウ", 20];


// 私の名前はタロウです。年齢は20歳です。
var message = `私の名前は${personArray[0]}です。年齢は${personArray[1]}歳です`;
```

これをArrayの分割代入で記述するとこんな感じになります。

```sample.js
const personArray = ["タロウ", 20];

// Arrayの分割代入
const [name, age] = personArray;

// 私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${name}です。年齢は${age}歳です`;
```
※ただし、Arrayは0番目、1番目というふうに要素数と順番できまっているので、**objectと違い、順番をかえることはできません**


## デフォルト値
関数（アロー演算子）を使うときに引数をとりますが、もしそれが代入されていなかったら？
たぶんこんな感じになるでしょう

```example.js
const hello = (name) => {
    return `Hello! ${name}`;
}

hello() // Hello! undefined になる
```

デフォルト値は**代入されない場合に使用される値**を設けることができます

```example.js
const hello = (name = "タロウ") => {
    return `Hello! ${name}`;
}

hello() // Hello! タロウ になる
hello("ハナコ") // Hello! ハナコ になる
```
デフォルト値を使うことで、意図しないエラーを防ぐことができます

また分割代入でも同様にデフォルト値を設けることができます。

```sample.js
const personObject = {
    name: "タロウ",
};

// 分割代入だけど存在しないageを取り出す
const { name, age } = personObject;

// 私の名前はタロウです。年齢はundefinedです。
const message = `私の名前は${name}です。年齢は${age}歳です`;
```


```sample.js
const personObject = {
    name: "タロウ",
};

// デフォルト値を使って分割代入する
const { name, age　= 20 } = personObject;

// 私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${name}です。年齢は${age}歳です`;
```
※アロー演算子については[こちら](https://qiita.com/k-tetsuhiro/items/9900665f200f0ca77e96#%E3%82%A2%E3%83%AD%E3%83%BC%E6%BC%94%E7%AE%97%E5%AD%90)を参考にしてください

## スプレッド構文
スプレッド構文はobjectや配列に対して使えます。
スプレッド(Spread)＝広げる、なので内部の要素をひろげる（展開）してくれます。
**...を使うことで要素を順番に展開**できます

```sample.js
cosnt array_1 = [1, 2, 3];

array_1 // [1,2,3]
...array_1 // 1 2 3 というふうに順番に展開されていく
```

具体的にはこんな場面で使えます

```sample.js
const numbers  = [10, 20];

const add_numbers = (number_1, number_2) => {
    return number_1 + number_2 ; // これは大丈夫
}

//　従来はこう書いていた
add_numbers(numbers[0], numbers[1]);

// スプレッド構文を使えばこうかける
add_numbers(...numbers);
```

スプレッド構文をうまく使えば配列のコピーなどが簡単にできます

```sample.js
const array_1 = [10, 20];
const array_2 = [30, 40];

const array_1_copy = [...array_1]; // [10, 20]になる
const array_1_2_copy = [...array_1, array_2]; // [10, 20, 30, 40]になる
```
※arrayを=とかでそのままコピーすると、コピー元の方も影響をうけるのでこんな感じでコピーするほうがいいです



## まとめ
デフォルト値は普段Ruby on Railsの開発をやっていることもあって、キーワード引数とかで馴染みがあったのですが、分割代入の概念ははじめてしりました。やっぱり昔の書き方とは大幅に違ってモダンな書き方は便利そう、、、！なれていくまで精進あるのみ。続きはその３へ、、、！

https://qiita.com/k-tetsuhiro/items/007f5b2ed9dbfbc5793d