React axios の セミコロンは要らないの？

Question

Reactを使って、Googleマップをテスト表示させています。
初心者のためよくわからないのですが、以下のコードではなぜ then()の最後に';'が要らないのでしょうか？

export const geocode = place => (
  axios
    .get(GEOCODE_ENDPOINT, { params: { address: place, key: API_KEY } })
    .then((results) => {
      const resData = results.data;
      const status = resData.status;
      const result = resData.results[0];

      if (typeof result === 'undefined') {
        return ({ status });
      }

      const address = result.formatted_address;
      const location = result.geometry.location;

      return ({ status, address, location });
    })
);

このコードを一番最初に書いた時、私は

　　　　return ({ status, address, location });
    });

と書いていました。
なぜ、最後のセミコロンが要らないのか、誰か教えてください！

Answer 1

=>で書くArrow Functionには、大きく分けて2通りの書き方があります。

• 中括弧を続けて、その中に文を並べる
• それ以外のものを続けて、1つの式を置く

今回、geocode = place => (となっているように、これは後者の「式」で、axios.get(...).then()全体が長い長い1つの式の一部になっています。なので、式の途中である.then()のあとにセミコロンは入れられません。

Comments

[van-0215]

ありがとうございました！　すごく分かりやすかったです。

Answer 2

JavaScriptではセミコロンをつけてもつけなくても、文法上は問題ない時があるので、今回の部分ではエラーになります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions
に
// object リテラル式を返す場合は、本体を丸括弧 () で囲みます:
書いてます通り、objectを返さないといけないのに、;で区切ってるので何も返さないことになってしまいエラーになります。

Comments

[van-0215]

ありがとうございます！

今回の場合、あるとエラーになってしまいます。そのため質問をさせていただきました！

[rururu3]

ああ・・・すいません。エラー出るんですね。ちょっと書き直します。

[van-0215]

いえいえ、ありがとうございました！