JavaScriptの関数の戻り値を完全解説！初心者でもわかる使い方と基本の考え方

新人と先輩の会話形式で理解しよう

新人

「JavaScriptの関数で結果を返す方法ってどうすればいいんですか？」

先輩

「関数には戻り値という仕組みがあります。関数が実行した結果を呼び出し元に返すことができるんです。今から具体的な例を使って説明するので、一緒に見ていきましょう！」

1. 戻り値とは？

JavaScriptの関数の戻り値とは、関数が実行した結果を返すデータのことです。関数が特定の計算や処理を終えた後、その結果を呼び出し元に返すことで、他の処理に利用することができます。

たとえば、「二つの数を足してその合計を返す関数」を考えてみましょう。戻り値を使えば、この合計を他の場所でも活用できるようになります。

2. 戻り値を返す関数の基本例

次に、二つの数字を足してその結果を戻り値として返す関数の例を見てみましょう。


<script>
function addNumbers(num1, num2) {
    return num1 + num2;
}

let result1 = addNumbers(5, 3);
let result2 = addNumbers(10, 15);

document.write("5 と 3 を足した結果: " + result1 + "<br>");
document.write("10 と 15 を足した結果: " + result2 + "<br>");
</script>

ブラウザ表示

このプログラムでは、addNumbersという関数を定義しています。この関数は引数として二つの数num1とnum2を受け取り、それらを足した結果をreturn文で返しています。返された結果はresult1やresult2に格納され、document.writeを使って画面に表示されます。

3. 実行結果を確認しよう

プログラムを実行すると、次のような結果が画面に表示されます：

5 と 3 を足した結果: 8
10 と 15 を足した結果: 25

このように、関数が計算した結果を戻り値として返すことで、結果を呼び出し元で使うことができます。

4. 戻り値を使った応用例

戻り値を使えば、数値の計算以外にも文字列の操作や条件判定などさまざまな処理が可能です。次に、文字列を結合して返す関数の例を見てみましょう。


<script>
function greet(name) {
    return "こんにちは、" + name + "さん！";
}

let message1 = greet("太郎");
let message2 = greet("花子");

document.write(message1 + "<br>");
document.write(message2 + "<br>");
</script>

ブラウザ表示

このプログラムでは、greetという関数が一つの引数nameを受け取り、その名前に応じた挨拶文を戻り値として返します。その結果をdocument.writeで画面に表示します。

実行すると次のように表示されます：