ES６まとめ

#はじめに
const,let,アロー関数,class構文,分割代入について書きます。

##ES６のメリット

ES6を学ぶメリットは従来より簡単で明瞭な構文で記述出来ること

##const

const wanko = 'toypoo';
console.log(wanko);

wanko = 'pome'; //error

constは再代入と再宣言が不可能な宣言です。
wankoはtoypooのままなのです。

##let

let wanko = 'toypoo';
console.log(wanko);

wanko = 'pome';
console.log(wanko);

let wanko = 'pome';  //error

##let,const まとめ

let,const共に再宣言は出来ません。
letだけは再代入が可能となります。constは再代入も再宣言も出来ない頑固なやつです。

letとconstは場合によって使い分けていく必要があります。

##アロー関数

//従来の無名関数
var wanko = function(toypoo,pome){
    return toypoo+pome;
};
//こっからはアロー関数
const wanko = (toypoo,pome) => {
    return toypoo + pome;
};

const wanko = (toypoo,pome) => toypoo+pome;

const wanko = (toypoo,pome) => ({ sum:toypoo+pome});

従来のものより簡単に書くことが出来ていますね。
functionがなくなり、returnもなくなり、どんどん見やすくなっていってます。

const Counter = function(){
  this.coiunt = 0;
};

Counter.prototype.increment = function(){
   setTimeout(() => {
      this.count++;
      console.log(this.counte);
   },1000);

const counter = new Counter().increment();

アロー関数は関数が定義されたスコープ内のthisを参照することが出来ます。

グローバル関数を参照していたためにおこるエラーを回避できますし、別の変数にthisを参照させる必要がなくなります。

ここで言うスコープとは作った変数や関数が使える範囲のことです。
グローバル変数のスコープは変数宣言位置以降からファイル終端までです。
グローバル変数とは複数の関数から使用することの出来る変数のことを言います。
かなり強いイメージです。
これに対し一つの関数内のみで使用できる変数のことをローカル変数といいます。
弱い感じしますね＞＜

prototypeはReactでバリデーションする時にも出てきたものですが、prototypeはオブジェクト同士の繋がりを保持し、継承させるために使われています。

##class構文

class wanko {
    constructor(name){
        this.name = name;
    }
    sayHello(){
        console.log('Hello,I'm' + this.getName());
    }
    getName(){
        return this.name;
    }
}

class構文はprototypeベースのクラス定義構文の糖衣構文です。
ざっくりいうとクラブ構文を簡単に書けるようになる便利なものってことです。
Javascriptはprototypeベースのプログラミング言語なのでアロー関数のコード内で書いたようにprototypeを使ってオブジェクト同士を繋げるのですが、class構文を使えばいちいちprototypeなんて書かずにclassを定義できます。

##分割代入

分割代入は、配列とオブジェクトを分解して、要素とプロパティを一つ一つの変数に
分解するための構文です。

###配列の分割代入

let list = [10,20,30,40,50];
let [item0,item1,...other] = list;

alert(other); //[30,40,50]

変数の値を入れかえることも可能です。

###オブジェクトの分割代入

let toypoo ={
    name: 'toypo',
    age:2,
    hair: {
       type: 'mokomoko',
       color: ' brown'
    }
}

let {hair,hair:{color}}= toypoo;

console.log(color);

let toypoo ={
    name: 'toypo',
    age:2,
    hair: {
       type: 'mokomoko',
       color: ' brown'
    }
}

let {age: wankoage, name: wankoname} = toypoo;

console.log(wankoname); //toypo

key: newkeyで別の名前の変数に値を割り当てられます。