ES6（アロー関数）

はじめに

　関数の記法の一つとして導入されたアロー関数。従来のfunctionを用いた関数（以下無名関数とします。）と比べると簡潔な記述で関数を定義できる省略記法となっています。

//従来のfunction
 const fn = function(name) {
 return 'hello' + name;
};

//アロー関数を用いた関数
const fn = (name) => {
return 'hello' + name;
}
//引数が一つのときや実行文が一行のときはさらに省略可能です。
const fn = name => 'hello' + name;

アロー関数の省略記法において一つ注意点があります。それはアロー関数が戻り値としてオブジェクトリテラルを返すときにあります。

//省略なし
let func = () => {
  return { foo: "hoge" };
};

//省略形(オブジェクトリテラルを括弧でくくる必要あり！)
let func = () => ({
  foo: "hoge",
});

リテラルを括弧無しで記述した場合、戻り値はundifidedとなります。

無名関数とアロー関数の挙動の違い(thisの参照が異なる)

　無名関数の省略記法であるアロー関数ですが、単なる省略ではありません。thisが持つ値は2つの関数記法では異なる値が保持されます。

//無名関数
window.name = 'Naruto'

const person = {
  name: 'Sasuke,
  hello: function() {　//hello() {　でも可
  console.log('Hello' + this.name)//Hello Sasukeと実行される
}


//アロー関数
window.name = 'Naruto'

const person = {
  name: 'Sasuke,
  hello: () => {
  console.log('Hello' + this.name)//Hello Narutoと実行される
}

上記のような挙動の違いはアロー関数がthisという値を取らないことにあります。無名関数であればオブジェクト内のthis.nameというのは同じオブジェクト内のname:'Sasuke'を参照していくれます。ですが、アロー関数でのthis.nameは同じオブジェクトリテラル内のname:'Sasuke'を無視してオブジェクトの外にあるwindow.name='Naruto'の値を保持することになります。（外部スコープ、スコープチェーンと言われる。）
以上のことから、アロー関数のthisでは一階層上の値を保持することとなります。(レキシカルスコープのthisが参照されると言います。)最後にこのことを確認して終わりにしたいと思います。

window.name = 'Naruto'

const person = {
  name: 'Sasuke,
  hello: function() {　//hello() {　でも可
  console.log('Hello' + this.name)//Hello Sasukeと実行される
  const a = () => console.log('Bye' + this.name);
  a();
}
person.hello(); //Hello.SasukeとBye.Sasukeが実行される。