スプレッド構文を用いた関数の処理の括弧について

Question

前提・実現したいこと

http://www.fumiononaka.com/Business/html5/FN1907003.html
上記URLにてTODOリストを作っております。

mapメソッドでスプレッド構文を処理に用いる箇所で、以下のような短縮されたコードがあります。
処理のコード{...todo, id:index}を()で囲っていますが、これがないとエラーになります。
これはどういった意味があるのでしょうか。

該当のソースコード

hoge.map((todo, index) => ({...todo, id: index}));

短縮しないパターンはこうなると思いますが、、、

hoge.map((todo, index) => {
    return {...todo, id: index}
  });

Answer 1

hoge.map((todo, index) => {...todo, id: index});

と書いてしまうと {...todo, id: index} の部分がブロックと解釈されてしまうんですよね。

hoge.map((todo, index) => {
    ...todo, id: index
});

こういうことです。
その結果 ...todo で構文エラーになります。

Comments

[YYmd0525]

理解できました。ありがとうございました！

Answer 2

文法上の要請です。

const f1 = x => { label: x };
//              ^オブジェクト初期化子ではなくて、ブロックの開始記号と解釈される。
const f2 = x => ( { label: x } );

f1(1);
// undefined
f2(2);
// { label: 2 }

Comments

[YYmd0525]

わかりました。ありがとうございました！