JavaScript ES2015, アロー関数ってなんだ？

JavaScriptで関数っぽいんだけど、見たことないものをここ数年見かけます。

『どうせシンタックスシュガーでしょ？』と、まぁなんとなく分かっていたのでほっといたのですが、それはいかんだろうということできちんと調べました。

まず答えを言うと、シンタックスシュガーではありません。ES2015(ES6)から導入された新しい記法でした。

まずは、よく見かけるJavaScriptの関数の書き方から。

function plus(a, b) {
    return a + b;
}
console.log(plus(1, 4));

これはかんたんですね？ ほかのプログラム言語でも見る書き方です。コンソールログにplus()の結果『5』が表示されます。

var plus = function(a, b) {
    return a + b;
}
console.lgo(plus(a, b));

もう一つ、無名関数と呼ばれるものです。JavaScriptやPHPなどWeb系のプログラム言語ではよく見る使い方。

関数を変数に格納できるオブジェクトとして扱い、その変数から関数をコールするやり方です。オブジェクトなので、そのまま関数の引数に指定することもできます。

let num = 1;
let str = "string";
let arr = ['arr1', 'arr2', 'arr3'];
let obj = {ojb1:"xxx", obj2:"yyy"};

アロー関数は無名関数の新しい記法

やっと本題です。ES2015では無名関数に新しい書き方が加わりました。

let plus = (a,b) => { return a + b };

let plus = (a,b) => a + b;

まず上のコードの説明から。矢印（アロー, arrow）の左の()が関数の引数で、矢印の右の{}内が関数の処理の内容です。

そして、アロー関数がシンタックスシュガーでない理由がここから。この関数には省略形が存在します。シンタックスシュガーがあるということですね？

それが下のコードの書き方です。

1文がreturnじゃない場合どうなるかというと、returnで返されちゃいます。でもその処理自体、戻り値を期待していないので無視すればいいだけ。

（返すものがない場合、undefinedを返す。）

引数が1つの場合は()が省略できます。例がなかったので、こんな感じです。

let plus = a => a * 2;

aを2倍にした値がplusに入ります。

引数がない場合、()は省略できません。

let plus = () => 1 + 5;

plusに『6』が入ります。

オブジェクトを戻り値にする場合、注意が必要です。

let plus = () => {test1:"xxxxx", test2:"yyyyy"};

これはエラーになります（Uncaught SyntaxError: Unexpected token）。

{}がオブジェクトのものではなく関数の{}だと勘違いするから。この場合は()でくくります。

let plus = () => ({test1:"xxxxx", test2:"yyyyy"});

いろいろありますが、『こんなに略したら分からなくなるでしょ!』っていうくらいすっきりしています。

慣れるまでしばらく？？？が続きそうです。