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で画面に表示します。

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

こんにちは、太郎さん！
こんにちは、花子さん！

5. 戻り値とreturnの重要性

関数におけるreturn文と戻り値の使い方を理解することで、プログラムの再利用性や効率が大きく向上します。同じ関数を異なるデータに対して繰り返し使用できるため、複雑な処理も簡単に行えるようになります。

たとえば、計算処理をまとめた関数を一度作れば、何度でも呼び出して異なる入力に対する結果を得られます。これにより、コードを短くし、保守性を高めることができます。

6. returnがない場合の戻り値

JavaScriptの関数では、return文を省略することもできますが、その場合は自動的にundefinedが返されます。この挙動を理解しておくことはとても重要です。


<script>
function showMessage() {
    document.write("メッセージを表示します<br>");
}

let result = showMessage();
document.write("戻り値: " + result);
</script>

この例では、関数はメッセージを表示するだけで値を返していないため、戻り値はundefinedになります。

7. return文で処理を途中終了する

returnは値を返すだけでなく、その時点で関数の処理を終了させる役割もあります。この性質を使うことで、条件に応じた処理を簡潔に書くことができます。


<script>
function checkNumber(num) {
    if (num < 0) {
        return "負の数です";
    }
    return "正の数または0です";
}

document.write(checkNumber(-5) + "<br>");
document.write(checkNumber(10));
</script>

このように、条件によって早めに処理を終了させることで、読みやすく効率的なコードを書くことができます。

8. 戻り値を他の関数で活用する方法

戻り値は、他の関数に渡してさらに処理を行うこともできます。これにより、処理を細かく分けて再利用しやすいコードを書くことができます。


<script>
function add(a, b) {
    return a + b;
}

function double(num) {
    return num * 2;
}

let result = double(add(3, 4));
document.write("結果: " + result);
</script>

この例では、まずadd関数で足し算を行い、その結果をdouble関数に渡して2倍にしています。このように戻り値を組み合わせることで、より柔軟な処理が可能になります。