ES6 の書き方

はじめに

ES6 を勉強して知らないことがたくさんあったので忘れないようにまとめておきます。

let/const

今の JavaScript は、極力 var ではなく let と const を使います。var を使うと変数の巻き上げが起こり、スコープが分かりにくくなります。

var の巻き上げについて

• let: ブロックスコープの局所変数を宣言する
• const: 再代入禁止の変数を宣言する

const N = 5;
for(let i = 0; i < N; i++) {
  console.log(i);
}

アロー関数

次のような書き方をした関数を アロー関数 と呼びます。

const func = () => {
  console.log("アロー関数");
};

func();

関数の呼び出し方や挙動は function と変わりないですが、関数内での this　の扱いが異なります。

const func = (() => {
  this.name = "aa";
  return {
    func1: function() {
        console.log(this.name);  // undifined
    },
    func2: () => {
        console.log(this.name);  // "aa"
    },
    func3() {
        console.log(this.name);  // undifined
    }
})();

func.func1();
func.func2();
func.func3();

function の中で this を使うと関数の中を指すので、外で宣言している name は undifined になります。対して、このアロー関数の this は window を指し this.name の this と同じになります。

function で同じようなコードを書くには次のようにする必要があります。

const func = () => {
  this.name = "aa";
  const self = this;

  return {
    func1: function() {
      console.log(self.name);
    }
  }
}