返り値というものがわかりません。

Question

初歩的な問題で失礼します。
さっぱり返り値というものがわかりません。

下記２つ表示結果は一緒なのに、何がどう違うのでしょうか？
多分、分かる人には一目瞭然な違いなのでしょうが、以前も勉強した時に返り値のところで砕け散りました。。。。

何がどう違くて、なぜ返り値を使うのかご説明いただけたら幸いです。
ぜひよろしくお願いします。

function output_hello(){
   document.write("<p>hello関数:hello</p>");
}
output_hello();

function make_hello_name(name){
   var str = '<p>make_hello_name関数: hello ' + name + '</p>';
   return str;
}
 
var hello_name = make_hello_name('鈴木');
document.write(hello_name);

Comments

[think49]

「返り値の違い」と「実行結果の違い」は別だと思いますが、少なくとも前者はコンソール出力すれば、分かるのでは？
https://qiita.com/mtoyopet/items/7274761af5424cee342a

[think49]

それと、何がどう分からないのか、を具体的に書いて下さい。
https://teratail.com/help/question-tips#questionTips2

[miyabi_pudding]

戻り値がある関数の使い道というか、なぜreturnを使う必要があるのか？
というのがわからない、ということですか？
であれば、掲示された例だと、returnの利用価値は、なにもないものと思います。
もうちょっと複雑な処理をする時に、使用する理由とかが見えるかと。
あと、掲示の二つだと、出力変わるので、尚更、例としては不適切かと。

Answer 1

生成した文字列を、使う側でどうできるかが異なってきます。

make_hello_nameのほうであれば、受け取った文字列をdocument.write()するだけでなく、alert()でダイアログ表示したり、console.logに出力したり、はたまたさらに文字列加工したり…と好きなように使えます。

一方で、output_helloはdocument.write()専用です。

Answer 2

示された例が対になってないので

function output_hello(){
   document.write("<<p>make_hello_name関数: hello 鈴木 </p>");
}
output_hello();

と

function make_hello_name(name){
   var str = '<p>make_hello_name関数: hello ' + name + '</p>';
   return str;
}

var hello_name = make_hello_name('鈴木');
document.write(hello_name);

だとしましょう。

引数があると便利なこと

仕様で田中も出してほしいとなったら上側だと

function output_hello(){
   document.write("<<p>make_hello_name関数: hello 鈴木 </p>");
}
output_hello();
function output_hello2(){
   document.write("<<p>make_hello_name関数: hello 田中 </p>");
}
output_hello();
output_hello2();

となりますが下だと

function make_hello_name(name){
   var str = '<p>make_hello_name関数: hello ' + name + '</p>';
   return str;
}

var hello_name = make_hello_name('鈴木');
document.write(hello_name);
var hello_name = make_hello_name('田中');
document.write(hello_name);

になります。100個追加してほしいってなったら上だと関数100個作る必要がある。下だと

var hello_name = make_hello_name('田中');
document.write(hello_name);

を増やしていくといい。

さらに、100個追加したあとに仕様変更で<p>を<br>に変えてほしいってなったら上だと100個全て書き換える必要がある。下だと1個変えればOK

名前は配列に入っているから配列にある名前を出してほしいってなったら、上ではできますか？
下のやつだとループ処理できますよね。

戻り値であると便利なこと

(質問で示されてるコードだと引数ありでないと説明しづらいので引数＆戻り値ありで)

function output_hello(){
   document.write("<<p>make_hello_name関数: hello 鈴木 </p>");
}
output_hello();

これだとdocument.write命令に固定の文字列を出すだけの関数になります

function make_hello_name(name){
   var str = '<p>make_hello_name関数: hello ' + name + '</p>';
   return str;
}

これだと戻り値を受け取ってそれをdocument.writeにわたすこともできますし、document.getElementById('てけ').textに代入することもできます。

---

効率化できると思いませんか？

※ただ問題として出せっていうだけなら問題ないけど、仕事とかだと仕様変更いっぱいあるしデータいっぱい取り扱うので効率化したいよね

Comments

[q_sane_q]

これ、どちらかというと
返り値の有無ではなく引数の有無による差異ではないでしょうか？

[rururu3]

ご指摘どおりですね。ちょっと変えます

[q_sane_q]

まあ、元の質問が片方は引数なし片方は引数ありになっているのでウームってところはあるのですが…

Answer 3

どっちでも大した違いはないです。深く考えない方がいいでしょう。

あえて言うなら、前者がサブルーチン的で副作用があり、後者が関数的で副作用がないのですが、学問的だったり趣味的な違いです。
初学者の内は一切気にする必要はありません。（関数型言語やサブルーチンと関数の定義が別の言語は除きます）

---

もしかして、return文の意味が分からない、ということであれば、質問を変更した方がいいかもしれません。

Answer 4

関数が返す値のことです
関数が、strの値を返してます
その関数を呼び出した側が、返り値を変数に入れるなりして使うことができます