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>