JavaScriptの関数の中でreturnを使うタイミングとコツ

1. returnとは？関数が結果を返すための命令

1. returnとは？関数が結果を返すための命令

JavaScriptの関数は何か処理をして結果を返すことができます。その結果を返すために使うのがreturnです。

returnを書いたら、その関数の処理はそこで終わり、returnの後ろの値が呼び出し元に返されます。

function add(a, b) {
  return a + b;  // ここで計算結果を返す
}
console.log(add(3, 5));  // 8 と表示される

この例では、add関数が足し算の結果を返しています。

2. returnを使うタイミング①: 計算結果や処理結果を返したいとき

2. returnを使うタイミング①: 計算結果や処理結果を返したいとき

関数は「計算機」のように使うことが多いです。何かを計算したり処理した結果を呼び出し元に返したいときにreturnを書きます。

function multiply(x, y) {
  return x * y;  // 掛け算の結果を返す
}
console.log(multiply(4, 6));  // 24

このように結果を返して、別の場所でその値を使えるようにします。

3. returnを使うタイミング②: 条件により処理を途中で終わらせたいとき

3. returnを使うタイミング②: 条件により処理を途中で終わらせたいとき

場合によっては、関数の途中で処理を終わらせたいことがあります。そんなときもreturnを使います。

例えば、引数が不正な値だったらすぐに終わらせたい場合です。

function divide(a, b) {
  if (b === 0) {
    return "エラー：0で割れません";  // ここで終わり
  }
  return a / b;  // そうでなければ割り算の結果を返す
}
console.log(divide(10, 2));  // 5
console.log(divide(10, 0));  // エラー：0で割れません

この例では、0で割ろうとしたらすぐに関数を終了し、エラーメッセージを返しています。

4. returnを途中で使うコツ: 不要な処理を避けて効率化しよう

4. returnを途中で使うコツ: 不要な処理を避けて効率化しよう

関数が長くなると、全部の処理を最後まで実行するのが無駄な場合もあります。そんなときに早めにreturnして終わらせると処理が速くなります。

例えば、値のチェックを先にして、問題があればすぐに返す書き方です。

function greet(name) {
  if (!name) {  // nameが空やundefinedの場合
    return "名前がありません";
  }
  return "こんにちは、" + name + "さん！";
}
console.log(greet("太郎"));  // こんにちは、太郎さん！
console.log(greet(""));      // 名前がありません

こうすると無駄な文字列の連結などをしなくて済みます。

5. returnを使わない場合はundefinedが返る

5. returnを使わない場合はundefinedが返る

もし関数の中でreturnを書かなかったら、関数を呼んだ結果は特別な値undefinedになります。

undefinedは「値がない」「未定義」という意味で、何も返していないことを示します。

function sayHello() {
  console.log("こんにちは");
}
const result = sayHello();
console.log(result);  // undefined と表示される

この場合、関数は文字を表示していますが、呼び出し元には何も返していません。

6. returnを使うときの注意点

6. returnを使うときの注意点

• 関数内で複数回returnを書いても、最初に実行されたreturnで関数は終わる。
  なのでreturnの後のコードは実行されません。
• returnの戻り値は関数の呼び出し元で受け取ることができる。
  何も受け取らなければ捨てられます。
• returnの値は1つだけ返せるが、配列やオブジェクトにまとめれば複数の値も返せる。

7. まとめ

7. まとめ

JavaScriptの関数でreturnは結果を返す命令であり、計算結果や条件によって処理を途中で終わらせたいときに使います。

処理を効率よくするために、条件チェックで早めにreturnを書くことが大切です。

returnを使わない場合はundefinedが返るので、返すべき値があるなら忘れずに書きましょう。

まとめ

まとめ

これまでにJavaScriptにおけるreturnの基本的な役割から、実戦で役立つ応用的な使い方までを詳しく見てきました。returnは単に関数の実行結果を呼び出し元に戻すだけのツールではなく、プログラムの制御フローを適切に管理し、コードの可読性やメンテナンス性を向上させるための非常に強力な武器となります。

return文の役割を再確認しよう

JavaScriptを学び始めたばかりの頃は、「console.log()で表示されているから大丈夫」と思ってしまいがちですが、実務レベルのプログラミングでは、画面に表示するよりも「計算した結果を次の処理に渡す」ことの方が圧倒的に多いです。例えば、ユーザーの入力値をバリデーション（検証）し、問題がなければデータベースに保存する、といった一連の流れでは、各ステップで関数が適切な戻り値を返すことが不可欠です。

ここで、returnを使う際の重要なポイントをいくつか深掘りしてみましょう。

早期リターン（Early Return）によるコードのクリーン化

プログラミングのテクニックの一つに「ガード句」というものがあります。これは、関数が本来やりたいメインの処理に入る前に、エラーや例外的な状況をif文でチェックし、速やかにreturnで関数を抜けてしまう手法です。これにより、else句のネスト（階層）が深くなるのを防ぎ、コードを上から下へ直線的に読めるようになります。

function processOrder(amount, stock) {
  // ガード句：在庫がない場合はすぐに終了
  if (stock <= 0) {
    return "在庫不足です";
  }
  
  // ガード句：金額が不正な場合はすぐに終了
  if (amount <= 0) {
    return "注文金額が正しくありません";
  }

  // メインの処理
  const discount = amount * 0.1;
  const total = amount - discount;
  return "注文完了。合計金額：" + total + "円";
}

console.log(processOrder(1000, 5));

注文完了。合計金額：900円

上記のコードのように、例外的なケースを先に片付けてしまうことで、後半のメインロジックに集中して実装できるのが大きなメリットです。

TypeScriptでの戻り値の型定義

現代のWeb開発では、JavaScriptに静的型付けを追加したTypeScriptが主流です。TypeScriptを使うと、関数が何を返すべきかを明示的に定義できるため、returnの忘れ物や型違いによるバグを未然に防ぐことができます。

function calculateTax(price: number): number {
  const taxRate = 0.1;
  return price * taxRate;
}

const tax = calculateTax(1500);
console.log("消費税:", tax);

消費税: 150

このように: numberと指定することで、この関数は必ず数値を返さなければならないというルールが作られ、開発の安全性が飛躍的に高まります。

複数の値を返したい場合はオブジェクトを活用

基本としてreturnは1つの値しか返せませんが、複数のデータをまとめて返したいときはオブジェクトや配列を使いましょう。

function getUserInfo() {
  return {
    name: "山田太郎",
    age: 25,
    email: "yamada@example.com"
  };
}

const user = getUserInfo();
console.log(user.name + "さんの年齢は" + user.age + "歳です。");

山田太郎さんの年齢は25歳です。

このように、戻り値を工夫することで、関数の役割はさらに広がります。