javascript: return文における｛｝利用の意図を教えて下さい。

Question

前提・実現したいこと

オンライン学習講座でeventbriteのAPIを使用して、キーワードとジャンルを入力して検索すると関連するイベント一覧が表示されるウェブサイトを作成しました。その際、return文を記述するときに変数を｛｝で囲うように指示されました。｛｝を外すとエラーとなります。なぜそうなるのでしょうか？

発生している問題・エラーメッセージ

２箇所のreturn部分を｛｝を使わずにreturn categories; / return events;と書き換えると変数がundefinedとなってしまいます。

該当のソースコード

javascript//

class EventBrite {
constructor() {
this.auth_token = 'Z5L5BDZ37WYFDZLO5YY2';
this.orderby = 'date';
}

async getCategoriesAPI() {
const categoriesResponse = await fetch(https://www.eventbriteapi.com/v3/categories/?token=${this.auth_token});

const categories = await categoriesResponse.json();

return {
  categories
}

}

async queryAPI(eventName, category) {
const eventResponse = await fetch(https://www.eventbriteapi.com/v3/events/search/?q=${eventName}&sort_by=${this.orderby}&categories=${category}&token=${this.auth_token});

const events = await eventResponse.json();

return {
  events
}

}

}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください

[miyabi_pudding]

まさか、

return
categories

というように、returnの後に改行入れたらundefinedになる、とかって話じゃないですよね？
エラーが出る元のコードも記載された方がいいかと。

[yasutomi]

コードが汚すぎてまともに読めないです。

Answer 1

{ categories } って実は { categories: categories } の意なんですよ。

> const test1 = () => { const foo = 100; return foo }
undefined
> const test2 = () => { const foo = 100; return { foo } }
undefined

> test1()
100
> test2()
{ foo: 100 }

> test1().foo
undefined
> test2().foo
100

getCategoriesAPI() の呼び出し元で result.categories を読む想定のコードで、 return のあとの { } を消すとオブジェクトの階層がずれて undefined になるっていう挙動だと思われます。

Comments

[miyabi_pudding]

な、なんと、{}ブロックスコープで返すと、オブジェクトのプロパティとして返せるんですか。
知らなかった・・・。
ますます奇怪な言語ですな、JS。
しかし、応用、いろいろできそうな仕様ですね。
横槍失礼しました。

[miyabi-sun]

それは流石にES2015の勉強が足りてないのでは…
モダンな構文が大量に実装されて表面上は完全に別言語になっているので
アップデートしたほうが良いと思います。

[miyabi_pudding]

miyabi-sunさん>大変お恥ずかしい限りです。正直IEを言い訳に、モダンな構文はあまり勉強できていませんでした。（様々なプラットホームあるから言い訳にもならない苦笑）
精進します。

[dedede]

完璧に理解できました。ありがとうございました／／

[Lhankor_Mhy]

> miyabi_takatsukさん
> {}ブロックスコープで返すと、オブジェクトのプロパティとして返せる

細かい話で恐縮ですが、それはブロックではないです。（ブロックは文なのでreturn文で返せない）
オブジェクト初期化子のショートハンドです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015

[miyabi_pudding]

Lhankor_Mhyさん>ありがとうございます。
ES2015〜、今猛勉強中です。
なんとか追いつかねば・・・。