map関数内の記法について

Question

Qiita記事にて、mapメソッドに関するコードみていたのですが、分からない記法があった為、お聞きしたいです。
以下のコードですが、.map(dog => ({こちらの部分ですが、波括弧の前に通常の括弧がついているのは何故なのでしょうか。こちらの記法がいまいち分からない為、どなたかご助言頂けましたら幸いです。

const animals = dogs.filter(dog => dog.type === 'pomeranian')
  .map(dog => ({
    id: uuid(),
    name: dog.name,
  }));

Comments

[mather]

質問内容とはややそれますが、よく見るとmapの返し括弧が不足していますね。

[ruuuu]

本当ですね。追記しておきました！

Answer 1

波括弧の前に通常の括弧がついているのは何故なのでしょうか。

=>の直後に{を続けてしまうと、それは「アロー関数の行をくくる波括弧」とみなされてしまうため、それとの区別のために「オブジェクト1個を返すアロー関数」には丸括弧を入れる必要があります。

Comments

[ruuuu]

ご回答ありがとうございます。
こちらですが、実際に ()=>{} このような記法を使用するケースの場合ですが、基本的には複数行に渡り何か処理をするようなケースで使用されるという認識であっておりますでしょうか...?

[maisumakun]

逆に、「()=>{}」のままで「何も返さない関数」として使っても構いません。

[ruuuu]

> 逆に、「()=>{}」のままで「何も返さない関数」として使っても構いません
率直な疑問としまして、何も返さないのであれば、mapなどのメソッドを使用する意味はないのではないかと感じてしまうのですが、こちらはどういった場合に有用になってきますでしょうか？

[maisumakun]

特にmapに限った話ではないですが、「何か関数を入れるべき場面」でとりあえず入れておく用途として、空の関数を使うことはちょくちょくあります。

[think49]

「何も返さない関数」はJavaScriptでは実装出来ません。
「undefinedを返す関数」をmapの第一引数に与えた場合、全ての要素値がundefinedになります。

[ruuuu]

> 「何か関数を入れるべき場面」でとりあえず入れておく用途として
取り敢えず、空の関数を定義しておく、といった場合に使うものと解釈しました！

>undefinedを返す関数」をmapの第一引数に与えた場合、全ての要素値がundefinedになります。
そうだったのですね！
つまり、() => {}　このケースだと全ての値がundefinedの関数が作成されるという訳なのですね

[think49]

はい。「返り値を指定しなかった関数」は「undefinedを返す関数」になります。

Answer 2

波括弧の前に通常の括弧がついているのは何故なのでしょうか

カッコがないと()=>{}というコールバックだとみなされるからです
()=>({})はカッコ内のオブジェクトをリターンします

Comments

[ruuuu]

ご回答ありがとうございます。
そういった意味だったのですね。
理解できました！