[javascript] アロー関数について勉強してみた

アロー関数とは

関数リテラルをよりシンプルにかけるもの。らしい。

関数リテラルって？

無名関数、匿名関数とも呼ばれるそう。データ型の一種で、変数に代入が出来る。
書き方はこう。

var hoge = function(){
  console.log("hogehoge")
};

hoge();

ちなみにこの場合、関数の呼び出しを先に書くと怒られる。

hoge();

var hoge = function(){
  console.log("hogehoge")
};

Uncaught TypeError: hoge is not a function

functionとして宣言しておく方法では怒られない。

hoge();

function hoge(){
  console.log("hogehoge");
}

hogehoge

この関数リテラルを簡単に書けるのが、アロー関数らしい。

書き方

これが

var hoge = function(){
  console.log("hogehoge")
};

hoge();

こう！

var hoge = () => {
  console.log("hogehoge")
};

hoge();

function()の部分が()だけになって、矢印（アロー）=>がついていますね。
functionと書かなくて良くなり、多少楽になりました。

他にも引数が一つの場合、括弧を省略できるなどの書き方が出来るようです。

これが

var hoge = function(a){
  console.log(a);
};

hoge("hello!");

こう！

var hoge = a => {
  console.log(a);
};

hoge("hello!");

また、関数の中身が一行だと{}も省略可能。

var hoge = a => console.log(a);

hoge("hello!");

あと、return書かなくて良くなる。

var hoge = a => a*a*a;

console.log(hoge(3));

27

見やすい・・・？のか？分かりづらくなってきたな・・・。笑

メリットなど

こんな書き方も出来そう。例えばsetTimeout関数。

これを

var aisatsu = function(){
   alert("hello!");
}

setTimeout(aisatsu , 2000);

こう。

setTimeout(() => alert("hello!"), 2000);

一度しか使わない関数であればこれで良さそうですね。
ちなみに、

setTimeout(alert("hello!"), 2000);

これだと意図したとおりに動きません。最初にalert("hello")を解釈するので、呼び出した瞬間にalertがかかり、後続でalertからのreturn（undefined）が解釈されて、実質
setTimeout(undefined, 2000);
を処理していることになります。

まぁ、setTimeout(alert, 2000, "hello!");みたいな書き方もありますが。

まだ違和感はありますが書きなれてくると良くわかるようになるようです。
またthisとかpromiseとかコールバックとかちょっと聞きなれない単語がいっぱい出てきているので、しばらくはjavascript頑張って勉強して記事にしていこうと思います。