{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/es2017-arrow-func-syntax/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"0e12e0a6-f1bc-54fc-a12d-7c2c870e0e48","excerpt":"シンプルすぎて難解？昨今のNode.jsのオブジェクト周りの構文をまとめてみたに続いて、今度はアロー関数編です。\nおそらく今まではこんな感じで関数を書いてたと思います それがアロー関数の構文を使用すると、const hoge = options =>…","html":"

シンプルすぎて難解？昨今のNode.jsのオブジェクト周りの構文をまとめてみたに続いて、今度はアロー関数編です。\nおそらく今まではこんな感じで関数を書いてたと思います

\n
function hoge (options) {\n    return 1\n}
\n

それがアロー関数の構文を使用すると、const hoge = options => 1なります
\nめちゃくちゃ短くて楽、特に高階関数とか書き出すと欠かせない書き方なんですが、構文のルールが結構複雑なので纏めてみようと思います

\n

ちなみに、アロー関数におけるthisやスコープの話はしません。あくまで構文の話だけにとどめます。

\n\n

中身が一行の場合

\n

まずはベーシックなケースから。
\n中身の処理が１行しかない場合、

\n\n
// と等価\n// function hoge () {\n//     return 1 + 1\n// }\nconst hoge = () => 1 + 1
\n

処理が複数行に渡る場合にはルールがちょっと変わります

\n

1文で戻り値がオブジェクト定義式の場合

\n

ただし、戻り値でオブジェクト定義式（ex. return { age: 25, ... }）を利用する場合、書き方が変わります\n戻り値がオブジェクトの場合、()で囲う必要があります

\n
// NG\nconst map = ({ name, age, gender }) => { name, age, gender }\n\n// OK\nconst map = ({ name, age, gender }) => ({ name, age, gender })
\n

中身が複数行の場合

\n

中身の処理が複数の文に渡る場合、書き方が変わります
\n複数行になるともともとの書き方とあまり大差なくなります

\n\n
// と等価\n// function hoge () {\n//     const prefix = 'hoge'\n//     return `${prefix}_foo_bar`\n// }\nconst hoge = () => {\n    const prefix = 'hoge'\n    return `${prefix}_foo_bar`\n}
\n

引数が一つの場合

\n

引数が１つの場合、基本的には引数の()を省略可能です

\n
const increment = n => n + 1\nincrement(1) // 2\n\nconst prefixer = prefix => str => prefix + str\nconst log = prefixer('log: ')\nlog('hoge') // 'log: hoge'\nlog('foo') // 'log: foo'\nlog('bar') // 'log: bar'
\n

ただし、以下の場合には()を付ける必要があります

\n

引数にデフォルト引数を使用する場合

\n

引数にデフォルト値を与えたい場合は、引数が１こだったとしても、()を付ける必要があります

\n
// NG\n// const hoge = n = 1 => n + 1\n\n// OK\nconst hoge = (n = 1) => n + 1\nhoge()  // 2\nhoge(2) // 3
\n

引数がない場合、複数の場合

\n

引数がない場合、引数が２こ以上の場合も()が必要です

\n
// NG\n// const hoge = => 1\n// const hoge = n, a => 1\n\n// OK\nconst hoge = () => 1\nconst hoge = (n, a) => 1
\n

引数で分割代入する場合

\n

ReactのStateless Functional Componentなんかでよく登場する書き方だと思います。
\n引数を分割代入で受け取る場合もまた、()が必要です。

\n
// NG\n// const sum = { a, b, c } => a + b + c\n// const sum = [ a, b, c ] => a + b + c\n\n// OK\nconst sum = ({ a, b, c }) => a + b + c\nconst sum = ([ a, b, c ]) => a + b + c
\n

さいごに

\n

アロー関数の構文がもっとも楽に使えるのは、

\n\n

のときなので、「なるべく小さくシンプルな関数をたくさんつくれ」という言語設計者からのメッセージなのかもしれません

","timeToRead":5,"frontmatter":{"title":"条件付きな構文が多い昨今のNode.jsのアロー関数の構文をまとめてみた","tags":["JavaScript","Nodejs"],"date":"June 27, 2017","featuredImage":null}}},"pageContext":{"slug":"/es2017-arrow-func-syntax/","previous":{"fields":{"slug":"/es2017-object-syntax/"},"frontmatter":{"title":"シンプルすぎて難解？昨今のNode.jsのオブジェクト周りの構文をまとめてみた","tags":["JavaScript","Nodejs"]}},"next":{"fields":{"slug":"/migrate-wp-to-middleman-and-netlify/"},"frontmatter":{"title":"Wordpressで運用していたブログをMiddleman+Netlifyに変更した","tags":["Wordpress","AWS","Middleman","Netlify"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}