JavaScript 速習チュートリアル

JavaScript 関数の戻り値

1. 関数から値を返す (Returning Values from Functions)

関数は、その呼び出し元のコードに対して値を 返す(return) ことができます。
return 文 (return statement) を使用することで、関数内部から外部へ値を送信することが可能になります。

2. return 文の仕組み (The return Statement)

関数が return 文に到達すると、その関数の 実行は即座に停止 します。
return キーワードの後に記述された が、呼び出し元(caller)に送り返されます。

function 挨拶を返す() {
  return "ハローワールド";
}

let メッセージ = 挨拶を返す();

この例では、変数 メッセージ には "ハローワールド" という文字列が格納されます。

3. 計算された値を返す

ほとんどの関数は、計算や何らかの操作の結果を戻り値として返します。

function 掛け算(a, b) {
  return a * b;
}

let 結果 = 掛け算(4, 5);

掛け算(4, 5) が実行されると、その場所は結果である 20 に置き換わります。

4. 式の中での戻り値の利用

関数の戻り値は、値が期待される場所であればどこでも使用できます。
他の式(Expression)の中で関数呼び出しを直接記述することも可能です。

function 掛け算(a, b) {
  return a * b;
}

// 関数の戻り値(6)に10を掛ける
let 合計 = 掛け算(2, 3) * 10;

5. 多様なデータ型の返却 (Return Values)

関数は、数値だけでなく あらゆるデータ型 を返すことができます。

function フルネーム(名, 姓) {
  return 名 + " " + 姓;
}

let 名前 = フルネーム("太郎", "山田");

6. return 文による実行の停止

return 文が実行された後のコードは、一切実行されません

function 掛け算(a, b) {
  return "完了";
  // 以下の行は決して実行されません
  return a * b;
}

let 結果 = 掛け算(4, 3); // 結果は "完了" になります

7. return がない関数

もし関数内に return 文がない、あるいは return の後に値が指定されていない場合、その関数の戻り値は undefined になります。

function 掛け算(a, b) {
  let x = a * b;
  // return 文がない
}

let 結果 = 掛け算(4, 3);

この場合、変数 結果 の値は undefined となります。

8. 早期リターン(早期終了)

条件分岐(if文など)と return を組み合わせることで、特定の条件下で関数を途中で終了させることができます。これは 早期リターン (Early Return) と呼ばれる重要なテクニックです。

function 年齢チェック(年齢) {
  if (年齢 < 18) {
    return "未成年です"; // ここで関数が終了する
  }
  return "アクセス許可";
}

9. HTML への戻り値の出力

関数の戻り値は、Web ページ上の HTML コンテンツを更新するためによく使われます。

<p id="demo"></p>

<script>
function 摂氏に変換(華氏) {
  return (5 / 9) * (華氏 - 32);
}

// 関数の結果を HTML 要素の innerHTML に代入
document.getElementById("demo").innerHTML = 摂氏に変換(77);
</script>