ES6 Destructuring (分割代入) で簡潔なコードを書こう！

ES6（ES2015という名でも知られている）には、多くの新機能があって、その一つは destructuring assignment（分割代入）になりました。destructuring というのは、array（配列）やオブジェクトからのデータを取得する方法です。destructuringをよく使えば、コードがわかりやすくて簡潔になります。

本記事、ES6の destructuring について簡単に説明したいと思います。

## 対象者

- ES6 destructuring については、まだ聞いたことない方
- Javascript語でコードしているけど、ES6を使わない方
- Javascript語でコードしていて、コードが簡潔にしたい方

## 概要

本記事には、下記とほぼ同じ代入文がよく書いてあります。

```javascript
const { a, b } = object;
```

左側：代入されている変数
右側：この変数にデータを取得

ES6 Destructuring (分割代入) はだいたいそういうふうに書きますが、オブジェクトだけではなく、配列もString型も分割できます。それをもとに、本記事がいくつかの部分に分けています。

## 配列

ES6で、配列されているデータを分割代入できますが、まず、ES6がなしでの仕方を見ましょう。

```javascript
const emojis = ['🙂', '🤣', '👿', '🤖'];
const smile = emojis[0];
const laugh = emojis[1];
console.log(smile, laugh); // 🙂 🤣
```

それは、何も間違っていませんが、下記にするのはどう思いますか？（ES6で）

```javascript
const emojis = ['🙂', '🤣', '👿', '🤖'];
const [smile, laugh] = emojis;
console.log(smile, laugh); // 🙂 🤣
```

これで、もっとわかりやうくて簡潔になりましたが、いくつかのデータがいらないなら、どうしますか？

### 配列のデータを抜かすこと（スキップ）

配列を分割すると, いくつかのデータはいらないかもしれないので、それが抜かすことができます。 いくつかも抜かせます。

```javascript
const emojis = ['🙂', '🤣', '👿', '🤖'];
const [smile,, devil] = emojis;
const [, laugh,, robot] = emojis;
console.log(smile, devil, laugh, robot); // 🙂 👿 🤣 🤖
```

### `rest` オペレーターの使用

「rest」というのは、英語で「その他」という意味なので、このオペレーターを使うと、配列の他のデータを取得できます。restオペレーターは、`...` のシンタクスで使います。例えば：

```javascript
const emojis = ['🙂', '🤣', '👿', '🤖'];
const [smile, laugh, ...notHuman] = emojis;
console.log(smile, laugh, notHuman); // 🙂 🤣 ['👿', '🤖']
```

## 繰り返し可能な変数（iterables）

iterable（繰り返し可能）な変数（String型など）も分割代入できます。

```javascript
const alphabet = 'abcdefg';
const [a, b, c] = alphabet;
console.log(a, b, c); // a b c
```

## オブジェクト

ES6で、オブジェクト（JSON型）されているデータも分割代入できます。

```javascript
const user = {
  id: 1,
  name: 'Sam',
  age: 20
};
```

ES6がなしでの仕方で、こういうふうにします。

```javascript
const id = user.id;
const name = user.name;
const age = user.age;
```

ES6の分割代入で：

```javascript
const { id, name, age } = user;
console.log(id, name, age); // 1 Sam 20
```

**この仕方では、変数の名前とオブジェクトのデータの名前が同じにしなければなりません。**

### 他の名前を使うこと

上記に書いてあるのは、変数の名前とオブジェクトのデータの名前が同じにしなければなりませんが、他の名前も使えます。

```javascript
const { originalName: newName } = object;

// 例えば
const { name: userName, age: userAge } = user;
```

### 欠席値 (default value) の定義

オブジェクトを分割して、オブジェクトの属性に値がない場合、欠席値 (default value) を定義することができます。

```javascript
const { name, country = 'Philippines' } = user;
```

`user`という上記に書いてあるオブジェクトには、`country`という属性がなかったので、`undefined`になりますが、この `default` シンタクスで、`country`は`Philippines`という値が保存されます。

### 機能のパラメーター

```javascript
// 上記に書いてあるuserオブジェクトを使って、自己紹介の機能
const introduction = ({ name, age, country }) => {
  console.log(`Hello! I am ${name}, ${age} years old from the ${country}`);
}
// Hello! I am Sam, 20 years old from the Philippines
```

### 入れ子にされた (nested) オブジェクト

普通のオブジェクトの書き方にちょっと違いますが、入れ子にされたオブジェクトにも分割代入できます。例えば：

```javascript
const person = {
  name: 'Sam',
  age: 20,
  country: 'Philippines',
  parents: {
    father: 'Mario',
    mother: 'Sally'
  }
};
```

こういうオブジェクトありますが、`parents`という属性だけを取得したいので、ES6がなしで、こうします：

```javascript
const father = person.parents.father;
const mother = person.parents.mother;
console.log(father, mother); // Mario Sally
```

ES6で：

```javascript
const { parents: { father, mother } } = person;
console.log(father, mother); // Mario Sally
```

コードがもっと読みやすくて簡潔になりました :thumbsup: 

## 変数の交換（入れ替え）

ES6 Destructuring (分割代入) は、配列やオブジェクトだけのためではなく、変数の入れ替えにも使えます。例えば、この`a`と`b`という変数があります。

```javascript
let a = 1;
let b = 2;
```

交換したいなら、もう一つの変数が必要になります。

```javascript
let temp = a;
a = b;
b = temp;
```

その方法は、読みにくくて簡潔ではありませんが、ES6 Destructuring のおかげで、こういうコードだけでできます。

```javascript
[a, b] = [b, c];
```

## まとめ

上記の事例で、ES6 Destructuring (分割代入) を使えば、コードが短くて読みやすくなるということが見えます。なので、皆さんのコードには、こういうコード：

```javascript
a = object.a;
b = object.b;
c = object.c;
d = object.d;
...
z = object.z;

// 🤣
```

があれば、ES6 Destructuring使用の良い機会になりますね。一緒にES6 Destructuring で簡潔なコードを書きましょう！

## 参考

- [Object Destructuring in ES6 | DEV.to](https://dev.to/sarah_chima/object-destructuring-in-es6-3fm)
- [ES6 Destructuring](https://javascriptplayground.com/es6-destructuring/)
- [分割代入 - Javascript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)