【JavaScript】関数の戻り値について

はじめに

Reactの学習を進める中で、関数の戻り値について整理をしたかったので、記事にまとめてみました。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

関数の戻り値とは

関数の戻り値とは、関数の実行が完了した際に返される値のことです。「返り値」と呼ぶこともあります。

JavaScriptでは、return文を使って関数の実行結果を返すことができます。

戻り値は必ずしも関数に必要というわけではなく、設定しなくても動作する関数を作ることができます。例えば、Reactの学習を進めていく中でよく出てくる次のような場面では、戻り値を明示的に設定しないケースが多いです

• stateの更新や変更
• ボタンのクリックイベントの処理
• フォーム送信時の動作

戻り値があらかじめ設定されている例

一方で、JavaScriptの標準メソッドであるmapやfilterのように、戻り値があらかじめ定義されている関数も存在します。
これらのメソッドでは、開発者がreturnを明示的に書く必要はありません。

• map: 新しい配列を戻り値として返します。
• filter: 条件に合致する要素を持つ新しい配列を戻り値として返します。
  このように、標準メソッドでは「どのような戻り値が返されるのか」が予め仕様として定められています。

私の勘違い

Supabaseに保存したデータを取得し、別ページに表示するような処理を作っていた際のことです。以下のようなコードを書いたのですが、App.tsでSupabaseから取得したデータが表示されず、困っていました。

これは、関数に戻り値を設定していなかったことが原因でした。戻り値を正しく設定することで、Supabaseからデータを取得して表示できるようになりました。

修正前

supabase.ts

export const getAnswer = async () => {
  const { data, error } = await supabase.from("answers").select("*");
  if (error) {
    console.log("Error fetching data with answers:", error);
  } else {
    console.log("Fetched data with answers:", data);
  }
};

App.ts

  useEffect(() => {
    const getSelectAnswer = async () => {
      try {
        const data = await getAnswer();
        console.log("data", data);
      } catch (error) {
        console.error("Error fetching answer:", error);
      }
    };
    getSelectAnswer();
  }, []);

修正後

supabase.ts

export const getAnswer = async () => {
  const { data, error } = await supabase.from("answers").select("*");
  if (error) {
    console.log("Error fetching data with answers:", error);
  }
  return data; // データを返却する
};

この修正により、getAnswer関数が取得したデータを戻り値として返すようになり、useEffect内でデータを適切に受け取れるようになりました。

終わりに

今回は関数の戻り値について整理しました。戻り値の存在がコードの動作にどのように影響するのかを再確認することで、少し理解が深まりました。

参考

『【JavaScriptの超基本】関数や戻り値、スコープについて簡単に解説』Qiita

『【JavaScriptの入門】関数と戻り値』

『Javascript の配列操作を 破壊的操作と非破壊的操作を意識して整理する』Zenn