JavaScriptのアロー関数の省略記法について

Posted at 2019-09-14

JavaScriptのアロー関数の省略記法について少し戸惑ったので共有します。

###誰のための記事か
この記事では関数の省略記法について説明します。

そのため基本的なアロー関数の詳しい説明については下記の参考の欄の記事をお読みください。

###アロー関数の基本の形

(引数) => {関数の本体}

上記が基本の形なのですが、色々と省略して記述することもできます。

###関数の本体が一文のとき
関数の本体が一文であれば下記のように{}を省略することができます。

また一文の計算結果がそのまま戻り値となるのでreturn文も省略することができます。

(引数) => 関数の本体

###引数が1つのみの場合(引数が0個の場合は省略できない)

引数が一つの場合は引数の()すら省略することができます。

これによって基本的ですが、自分は変数の代入文とセットで使われるとアロー関数の引数と関数の本体の場合さえ代入のように見えてきて紛らわしくなり、とまどいました。

引数　=> 関数の本体

例えばreduxのtodoアプリのアクション定義部分をみると

export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

上記では引数がtextの一つのみで、()の部分がまず省略されていますね。

また、関数の本体部分もオブジェクトの一文のみで、{}もreturn文も省略されていることがわかります。

上記を省略記法無しで書くと以下のようになります。

export const addTodo = text =>{return ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})}

ちなみになぜオブジェクトリテラル記法の{}の外を()でくくられているかというと、代入も宣言もしていないオブジェクトを関数内で直に書くときは()で括る必要があるからです。

()を外して以下のように書くとエラーになります。

/*{}の外側の()を外して書くとエラーになる*/
export const addTodo = text => {
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
}

###終わりに

JavaScriptのアロー関数は多くの仕様があり、慣れるのはなかなか大変ですね。

アロー関数にはここでは割愛しますが、thisを制限するという仕様があります。

興味のある方はこちらの記事が分かりやすいので読んでみてください。

###参考