関数の省略記法(returnの省略)

関数の省略記法

関数の省略記法は、今回使っている返り値のある場合を想定します。

//省略しない場合
 const add1= (a) =>{
    return  a + 1
}

//省略した場合1
const add2= (a) =>( a + 2 )

//省略した場合2
const add3 = a => a + 3

以上の様にreturnを書き、その中に返り値を書くのが基本的な書き方ですが、returnを省略することができます。
ただ省略した書き方の場合は()で書いた中身全てがreturnの中という状態になりますので、定義等がかけません。
つまり、

const add4 = (a) => (
  const b = 1
  a+b
)

の様には書けないということです。

それでは本題のコード。

messages.map((message, index) => ( //<-ここが普通のかっこになっている
        const formatTime = `${message.timestamp.getFullYear()}/${message.timestamp.getMonth()+1}/${message.timestamp.getDate()} ${message.timestamp.getHours()}:${message.timestamp.getMinutes()}:${message.timestamp.getSeconds()}`
        <li className="list" key={index}>
          <ListItem>
            <ListItemAvatar>
              <Avatar alt="icon" src="/static/images/avatar/1.jpg" />
            </ListItemAvatar>
            <span className="p-chat__bubble">{message.content}</span>
            <span>{formatTime}</span>
          </ListItem>
        </li>
      ));

の様になっています。
コードの中にコメントを書いたのですが、

messages.map((message, index) => ( //<-ここが普通のかっこになっている

の部分でmap関数は戻り値のある関数で、省略記法を使っていることになります。
なのでその下にある

  const formatTime = `${message.timestamp.getFullYear()}/${message.timestamp.getMonth()+1}/${message.timestamp.getDate()} ${message.timestamp.getHours()}:${message.timestamp.getMinutes()}:${message.timestamp.getSeconds()}`

という定義はできないということです。
なので、省略記法は使わずにかいてやると、

return messages.map((message, index) => { //<-ここがオブジェクトのかっこ
        const formatTime = `${message.timestamp.getFullYear()}/${message.timestamp.getMonth() + 1}/${message.timestamp.getDate()} ${message.timestamp.getHours()}:${message.timestamp.getMinutes()}:${message.timestamp.getSeconds()}` //<-定義ができる
        return ( // <- returnでjsxを囲ってやる
        <li className="list" key={index}>
          <ListItem>
            <ListItemAvatar>
              <Avatar alt="icon" src="/static/images/avatar/1.jpg" />
            </ListItemAvatar>
            <span className="p-chat__bubble">{message.content}</span>
            <span>{formatTime}</span>
          </ListItem>
        </li>
        )
      });

という様になります。

MEMO

JavaScript、、、省略形が多すぎてわけがわからない。
アロー関数にはこれ以外にも省略記法は多くある。。。アロー関数以外にも多数あり。。。