ES6 から採用された、特殊な関数。単純に function を短く書けるわけではないので注意が必要、

基本的にコールバックに渡す関数を直に生成する場合に用いる。

function 等のキーワードが無くこのように書くと関数が生成される

var hoge = (aaa, bbb, ccc) => {
    return "hogehoge";    
};

aaa bbb ccc が引数である。

パラメータが無い場合は

var hoge = () => {
    return "hogehoge";    
};

いろいろなサンプルを見る限りアロー記号の両側にはスペースを入れるのが一般的なようだ。

このような短縮記述にありがちな大胆な省略記法も当然存在する。

引数が1個しか無い場合は、最初の括弧を書かなくてよい

var hoge = aaa => {
    return "hogehoge";    
};

処理が1行しか無い場合は中括弧と return が省略できる

var hoge = aaa => "hogehoge";

記述の関係上、セミコロンも省略される。

注意としては中括弧と return は同時に省略する必要がある。

このように書いても文法上は通るが hoge() の結果は undef になる。

var hoge = aaa =>{ "hogehoge" };

一部のフレームワーク等でアロー記号を何回も連続使われているものがある

ver hoge = (a) => (b) => {
    return a + b;
}

これは、よく関数型言語で出てくる手法にカリー化というモノのアロー関数でのショートカット記法である。

カリー化とは複数の引数を取る関数を1つの引数と残りの引数の結果を返す関数に変形するという操作になる。

このような関数を

function hoge(a, b, c){
    return a + b + c;
}

このように変形できる。

function hoge(a){
    return function(b){
        return function(c){
            return a + b + c;
        };
    };
}

なにか騙されているだけのような気もする これをそれぞれ使うとすると

hoge(1, 2, 3); // 6
hoge(1)(2)(3); // 6

こうなる。このようなカリー化された関数をアローで作りたい場合素直に書くとこうなる

var hoge = (a) => {
    return (b) => {
        return (c) => {
            return a + b + c;
        };
    };
};

アロー関数の省略記法で処理が1行の場合は return が省略できるというのがある。

var hoge = (a) => {
    (b) => {
        (c) => {
            return a + b + c;
        };
    };
};

もう一つ、処理が1つの場合は括弧も省略できる

つまりこうなるのである。

var hoge = a => b => c => a + b + c;

このような連続のアロー記号が使われていたらそれは複数のアロー元の変数を引数に取りアロー先の関数を返す関数だと思えばヨイ。

アロー関数が function の関数と大きく違うところは、this が変化しないということである。 function で記述した場合、this はその function がどのオブジェクトのメンバとして実行されたかによって変化してしまう。 つまり作った場所と違う場所で実行された場合を考慮しなければならないということになる。

なので長らく、このようにスコープに this を拘束して、その拘束した変数をクロージャで内部に持ち込んで使うということが行われてきた。

var that = this;

アロー記法で作られた関数は、その内部で使う this がその関数が作られたコンテキストに拘束される。 つまり実行時の状況ではなく書いた場所の this になる。

this がダイナミックに変化しないので設計が楽になる。

逆にフレームワークやライブラリによっては this を巧妙に操作するタイプのロジック(this に特別な意味をもたせてレシーバーを取り替わることが前提になっている)もあるので、 function で書いていたものが全部アローで書き換えられるとは限らない。注意する必要がある。

作成時の this で拘束されるということは、これつまりアロー関数は通常の function のようにコンストラクタ的関数として使うことができない。

this 同様に arguments に対してもアロー関数の実行時には拘束されない。 つまりアロー関数内での arguments キーワードはアロー関数を呼び出された時のそのアロー関数に対する引数ではなく、アロー関数が作られたコンテキストの arguments がクロージャによってアロー関数内に持ちこまれているということになる。