ES6 の関数の書き方

はじめに

前に書いた記事の続きです。初見の時に、意味がわからなかった無名関数の書き方をまとめます。

ES6の書き方

関数

次の関数は a, b の二つの引数を受け取り、足し算して返す add という名前がついた関数です。

const add = (a, b) => {
  return a + b;
}

しかし、いちいち名前をつける必要がないときは無名関数と呼ばれる、次の書き方があります。addEventListener の引数などコールバック関数を定義する時によく使われます。

obj.addEventListener('click', event => {
  console.log(event);
}

ここまでは理解できたのですが、次のような関数定義を見た時にすぐには理解できなかったです。

(callback => {
  if(callback !== 'undifined') {
    callback();
  }
})(argument => {
  console.log(argument);
})

この関数は二つの部分から成り、見やすくすると次のようになります。

const func = callback => {
  if(callback !== 'undifined') {
    callback();
  }
}

const callback = argument => {
  console.log(argument);
})

func(callback);

最初の関数定義が、一つの関数を引数に受け取る関数を宣言して

(callback => {
  if(callback !== 'undifined') {
    callback();
  }
})

そして、 callback に渡される関数が後半の関数定義になります。

(argument => {
  console.log(argument);
})