React入門 - Tips1 - アロー関数

目次

React入門

概要

アローとは、英語でarrow。つまり矢印ですね。
これまでのfunctionの書き方とのメリデメについては言及しません。。

これまでの書き方は、下記の１と２みたいな感じでしょうか。

// function書き方１
function test(x) {
  return x + 1;
} 

// function書き方２
const test = function(x) {
    return x + 1;
}

アロー関数での書き方

// arrow function  引数なし (かっこがいる)
const test = () => 1; // 出力の式が一行の場合はreturnは不要
// こういうことか
const test = () => {
  return 1;
} 

// arrow function 引数1つ (かっこいらない)
const test = x => x + 1; 
// これもこういうことですね。
const test = (x) => {
  return x + 1;
} 

// arrow function 引数2つ以上 (かっこいる)
const test = (x, y) => x + y + 1;
// これも書いておきます。
const test = (x, y) => {
  return x + y + 1;
}

まとめ

• 先頭で変数を定義する(const(定数)かlet(変数))
• () => {} の形で書く
• 引数が1つなら()も不要 (引数0なら()は必要)
• 出力が1行なら{}も不要
• 出力が1行ならreturnも不要

※アロー関数で書くのが今は主流のようです。