ES6以降の構文とES5の構文の比較

# :point_up: はじめに
分割代入とかスプレッド構文とかよく聞くけど、結局使い道がわからない方へ
ES5だとこんな感じに書くよーという比較記事。
よく使いそうなもののみ紹介していきます。

# :two_men_holding_hands: ES6とES5の構文比較
## Arrow Functions / アロー関数
```() => {}```

### ES6
```js
const arrowFunctionSample = args => args * 2
arrowFunctionSample (2)  // output: 4
```

### ES5
```js
var arrowFunctionSample = function(args) {
  return args * 2	
}
arrowFunctionSample (2)  // output: 4
```

### 説明
アロー関数はJava や C# のラムダ式の省略系のようなものです。
```this``` の参照が変わるので注意が必要。

## Default Args / 引数の初期値の設定
```function(a = 1, b = 2)```
### ES6
```js
const defaultParams = (a = 1, b = 2) => a + b
defaultParamsES6()  // output: 3
```

### ES5
```js
var defaultParams = function(a, b) {
  if (a == undefined) {
    a = 1
  }
  if (b == undefined) {
    b = 2
  }
  return a + b
}
defaultParams()  // output: 3
```

### 説明
引数がある場合はその引数を使用し、ない場合は初期値をセットすることができます。

## Destructuring Assignment / 分割代入
```function({ args }) {}```

```js:object
const profile = {
  name: "Ross",
  age: "30"
}
```

### ES6
```js
const getName = ({name}) => name
getName(profile)  // output: Ross
```

### ES5
```js
var getName = function(profile) {
  return profile.name
}
var name = profile.name
getName(profile))  // output: Ross
```

### 説明
オブジェクトのプロパティを直接渡すことができます。
```getName``` のように、関数へオブジェクトの引数を渡す際によく使われます。

分割代入を応用すると、値の入れ替えなども楽にできます。
```[value1, value2] = [value2, value1]```

## Spread Syntax / スプレッド構文

``` ...array ```  ```...object```

### ES6
```js
const movies = ["Whiplash", "LaLaLand", "FirstMan"]
console.log(...movies)
```

```:output
Whiplash LaLaLand FirstMan
```

### ES5
```js
var movies = ["Whiplash", "LaLaLand", "FirstMan"]
movies.forEach(function(movie) {
  console.log(movie)
}
```

```:output
Whiplash LaLaLand FirstMan
```
### 説明
for文を使わず順番に値を取得することができます。
下記のようにconfigファイルなどのオブジェクトを拡張する際によく使われます。

```js
const baseConfig = {
   basicAuth: true,
   ignoreHTTPSErrors: true
}

const extendConfig = {
  ...baseConfig,
  URL: 'http://localhost:8080'
}
```


また、スプレッド構文は分割代入と併用するととても便利です。

```js:object
const profile = {
  name: "Ross",
  age: "30",
  friend1: {
    name: "Joey",
    age: "33",
  },
  friend2: {
    name: "Rachel",
    age: "28"
  },
  bestFriend: {
    name: "Chandler",
    age: "31"
  }
}
```

### ES6
```js
const {name, age, ...friends} = profile
console.log(friends)
```

```json:output
{"friend1": { "name": "Joey", "age": "33" }, "friend2": { "name": "Rachel", "age": "28" }, "bestFriend": { "name": "Chandler", "age": "31" } }
```
### ES5
```js
var friends = {}
friends.friend1 = profile.friend1
friends.friend2 = profile.friend2
friends.bestFriend = profile.bestFriend
console.log(friends)
```

```json:output
{"friend1": { "name": "Joey", "age": "33" }, "friend2": { "name": "Rachel", "age": "28" }, "bestFriend": { "name": "Chandler", "age": "31" } }
```

### 説明
```const {name, age, ...friends} = profile``` のように、```name```, ```age``` 以外のプロパティを```friends``` にまとめることができます。


# :dancer_tone2: Playground
<p class="codepen" data-height="444" data-theme-id="light" data-default-tab="js,result" data-user="qwerty8t" data-slug-hash="KEpKpN" style="height: 444px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="ES6-sample">
  <span>See the Pen <a href="https://codepen.io/qwerty8t/pen/KEpKpN/">
  ES6-sample</a> by qwerty8t (<a href="https://codepen.io/qwerty8t">@qwerty8t</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>