JavaScript
es6

ES6 の書き方

はじめに

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

let/const

今の JavaScript は、極力 var ではなく letconst を使います。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 を使うと関数の中を指すので、外で宣言している nameundifined になります。対して、このアロー関数の thiswindow を指し this.namethis と同じになります。

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

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

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