ES勉強会パート1 ~jsもうろ覚えなのに、ES6を勉強しはじめた~

Javascriptもうろおぼえなのに、ES6を学び始めました。
メモとして記録を残しておきます。
参考サイトはこちら、
http://es6-features.org

ES6勉強会パート1でございます。

#定数
「一度定義したら、あとで変えられない」
っていう定数を作りたい場合、constを使います。

例はこちら
↓↓↓↓↓↓↓ 

````js:const.js
const number = 1.52
````

#ブロックスコープ変数
ブロックスコープってなんやねんっっっっっっっ
調べました。

まず、スコープについて理解する必要があるそうです。
一番わかりやすいのはこれかな？
>スコープとは変数やメソッド，クラスなどが見える範囲のことです。では「見える」とはどういうことでしょうか？
「見える」とは，それらが「プログラミング上使える」ということです。変数であれば変数名を指定して値を読み書きでき，メソッドであれば呼び出して使うことができます。

引用元：[第3回　スコープを意識したプログラミング―その1　スコープって何？：良いコ－ドへの道―普通のプログラマのためのステップアップガイド｜gihyo.jp … 技術評論社](http://gihyo.jp/dev/serial/01/code/000301)

次に、ブロックスコープってなんやねんて話ですが、スコープには「グローバルスコープ」「ローカルスコープ」「ブロックスコープ」があるそうです。
わかりやすいのはこのサイト
[初心者のためのJavaScriptのスコープ - 大人になったら肺呼吸](http://d.hatena.ne.jp/replication/20100327/1269789954)


このブロックスコープ変数は、「for文やwhile文の中にある変数で、その内部でしか機能しない変数」と解釈します。
ブロックスコープ変数には「let」を使います


```js:blockScope.js
const test = [1,2,3,4,5]
let x=0
for (let i =0; i<test.length; i++){ // このiもブロックスコープで縛られる。
     let x += test[i]
}
```

#ブロックスコープ関数
`{}`
この記号を使えば、その内部でしか使えない変数や関数が定義できる。



````js:bloclScopeFunc.js
{
  function test(){return 5}
  console.log( test() === 5 ); // true;
  {
     function test(){return 8}
     console.log( test() === 8 ); // true;
   }
}
````

#アロー関数
アロー関数は、無名関数を省略して記すやり方です。


````js:arroFunc.js
const arrowFunction = (x) =>{
     console.log(x);
}
````

thisの使い方が変わったらしいです。
調べてもわからない。。。難しいなこれ。
このサイトからコードを引用してきました。

[アロー関数について[ES2015(ES6)][this][arguments][JavaScript]](http://noumenon-th.net/programming/2017/02/26/arrow/)


```js:thisCheck.js

const book = {
	title: 'こころ',
	getTitle:function(){
		console.log( this.title ); //こころ
		
		const getTitle2 = () => console.log( this.title ); //こころ
		getTitle2();
	}
}
 


こういうことらしいです。
2個目のthisはこれまで、undefinedでしたが、前のスコープを継承するため、「こころ」を取得します。


#関数のデフォルトのパラメータ値

```js:defaultParam.js
function test(a, b =3, c=10){
     return a + b + c
}
test(2) === 15
```
b=3とc=10は初期値として設定しているので、aの部分は自分で設定する必要がありますね。
だから、test(2)でaを2と設定して、2+3+10で15です。


# レスト構文
引数を渡されただけ受け取るための仕組みです。
変数名の前に「...」をつけて表します。最後の引数にしか使えません。この「...」は次の「スプレッド構文」のやつとは違います。こっちはまとめて、あっちは展開（スプレッド）します。
───────
#可変長引数の操作
可変長引数とは、特に個数が決められていない変数です。
`...`で表します。スプレッド演算子って呼びます。


```js:spreadParameter.js
function test (a, b, ...c) {
    return (a + b) * c.length
}
test(5, 1, "test1", false, 15) === 54
```
この場合、aは5, bは1, cは"test1"とfalseと15を表します。
c.lengthは3になります(3個あるので)

# スプレッド構文

```js:spreadArray.js
var test1 = [ "test1", false, 15 ]
var test2 = [ 5, 1, ...test1, ...test1 ] // [ 1, 2, "test1", false, 15, "test1", false, 15 ]


var str = "yeah"
var chars = [ ...str ] // [ "y", "e", "a" "h" ]

var test3 = [1, 2, 3, 2];
var maximum = Math.max(...test3) // 3
```
関数の呼び出し、Arrayリテラル、オブジェクトリテラル（ECMAScript 2018）では、反復可能なオブジェクトの前に「...」を書くと、中身がそこで展開できます。

#テンプレートリテラル
このサイトめっちゃわかりやすいです
[JavaScript の テンプレートリテラル を極める！ - Qiita](https://qiita.com/kura07/items/c9fa858870ad56dfec12)

以下のコードは引用です。こんな使い方もあるんですね！！！
引用元：http://es6-features.org/#StringInterpolation


```js:tempLeteral.js
var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`
```


```js:tempLetral_spread.js
function quux (strings, ...values) {
    strings[0] === "foo\n"
    strings[1] === "bar"
    strings.raw[0] === "foo\\n"
    strings.raw[1] === "bar"
    values[0] === 42
}
quux `foo\n${ 42 }bar`

String.raw `foo\n${ 42 }bar` === "foo\\n42bar"
```

#2進数と8進数


```js:ByteOctal.js
0b111110111 === 503
0o767 === 503
```

上が二進数で、
下が八進数です。

二進数は、0(ぜろ)+ b(ビー)を先頭につけます
八進数は、0(ぜろ)+ o(オー)を先頭につけます

#正規表現
正規表現は、まとめるのしんどそうなので、
良さそうなサイトのリンクを貼っておきます
[正規表現 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions)



#パート1はここで終わり
ES6の勉強会パート1はここまで！
また、勉強したら、パート2を書きます！