吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】アロー関数式について

2014年10月10日 / category : typescript

アロー関数式について、まとめてみます。
アロー?矢印?

TypeScript
var add = (a:number, b:number) => a + b;

これがアロー関数式の例です。
赤い箇所が、矢印に見える?だから、アロー?
アロー関数式が初めてな自分には、これがどんな構文なのかさっぱりわからない。
ちなみに、これをコンパイルすると次のようなコードになる。

JavaScript
var add = function (a, b) {
    return a + b;
};

なんでだ?
というのを解説してみます。

考え方として、関数の構文をシンプルにしたのがアロー関数式。
僕なりに勝手に考えた通常の関数構文がアロー関数式になるまでの流れを・・・

1. とりあえず、関数を1行に。
var add = function (a, b) { return a + b; };

2. function省略しちゃおう!
var add = (a, b) { return a + b; };

3. {}も省略しちゃおう!
var add = (a, b) return a + b;

4. returnを=>に変更しちゃおう!
var add = (a, b) => a + b;

5. 引数の型指定はやっておこう。
var add = (a:number, b:number) => a + b;

こんな感じ。はい。
これが、アロー関数式です。

引数 => 処理内容

という感じですかね。

以上!

あ。
補足・・・。

上の「4. returnを=>に変更しちゃおう!」ですが、
=> {return};
という構文も可能です。

TypeScript
var add = (a:number, b:number) => { return a + b };

こんな感じ。