関数を使うと、何かを計算したり処理したりできますが、結果を外で使いたいときに大切なのが「戻り値」です。
たとえば、電卓アプリで「合計金額」を計算して別の画面に表示したいとき、戻り値がないと外に渡せません。
今回は関数の中でも「戻り値」について、まとめました。
戻り値について
関数の処理の結果を呼び出し元に返す際に、関数から返される値のことを「戻り値」といいます。
戻り値はreturn命令を使います。
関数から値が返されるので、関数を実行する呼び出し元では、結果を受け取るための変数を用意しておくなど、値を受け取る準備が必要です。
下の図のように、関数の中で処理された結果が「return」で呼び出し元に戻っていくイメージです。
戻り値returnがないと、関数の結果は自動的に何もないになります。
関数の外で結果を使いたい場合は必ずreturnが必要です。
例えば、以下の関数は、console.log() だけだと「画面に表示するだけ」ですが、
return を使えば、その結果をほかの処理で使えるようになる＝活用範囲が広くなります。
～returnなし～
function calcPrice(price, taxRate) {
let total = price * (1 + taxRate);
console.log(“税込価格は ” + total + ” 円です”);
}
calcPrice(1000, 0.1); // 出力: 税込価格は 1100 円です
～returnあり～
function calcPrice(price, taxRate) {
let total = price * (1 + taxRate);
return total; // ①この値が呼び出し元に返る
}
let totalPrice = calcPrice(1000, 0.1); // ②関数の結果がここに入る
console.log(“税込価格は ” + totalPrice + ” 円です”); //③結果を使って表示
if (totalPrice > 1000) { // ④結果を自由に使える！
console.log(“ちょっと高いですね…”);
}
値を「返す」ので、呼び出し元で自由に使えるようになるんです。
よく使う場面
returnは以下の場合に使われます。
１．計算結果を返したいとき
returnがあることで、関数の結果を外に渡せます。
２．関数内で条件によって途中で抜けたいとき
return は「値を返す」と同時に「関数の終了」も意味します。
まとめ
戻り値return を使うことで、関数を「一度使って終わりの箱」から「結果を返す便利な道具」に変えることができます。
returnが出てきたときは、この後の処理はどうなるのか考えてみるようにしましょう。
引用文献：超基本を学ぶ JavaScript プログラミングの基本を学びWebサイトを動かす仕組みを理解して表現の幅を広げよう 長江かほり著