JavaScriptのreturnについて

Question

JavaScriptのreturn文の概念がわかりません
下記のコードはreturnを使っている文と使っていない文ですが
returnを使わなくても同じ処理はできます・・・。
違いってあるのでしょうか？
下記のコードをでわかりやすく教えてください＞＜

<script>
  function game(str){
    return "Game is" + str;
  }

  var data = prompt("Game Name");
  document.write(game(data));
</script>

<script>
  var data = prompt("Game Name");
  document.write("Game is" + data);
</script>

Answer 1

質問の意図は「return の意義」「関数の意義」のどちらでしょうか？
タイトルは「return について」ですが、実際には

• return も関数もないコード
• 関数と return のあるコード

の比較なので質問の意図が分かりづらくなっていると思います。
return の質問なら下記コードのように「違いが return の有無になっているべき」だと思います。

function sample1 (name) {
  return 'Game is a ' + name;
}

function sample2 (name) {
  document.write('Game is a ' + name);
}

document.write(sample1('test'));
sample2('test');

両コードの結果は同じですが、sample1 は出力先を document.write でなくてもよく、汎用性が高いのが利点です。

Answer 2

return(とう言うかfunction)を使うとコードのメンテナンス性や可読性が上がります。
質問のコードだとメリットがわかりにくいのでちょっといじって

function game(str){
  // 例えばここに50行ほどの処理が書かれているとする
  return "Game is" + str;
}

var data = prompt("Game Name");
document.write(game(data));

var data2 = prompt("Game Name 2");
document.write(game(data2));

これを下でやると

var data = prompt("Game Name");
// 例えばここに50行ほどの処理が書かれているとする
document.write("Game is" + data);

var data2 = prompt("Game Name 2");
// 例えばここに50行ほどの処理が書かれているとする
document.write("Game is" + data2);

実際にコメントの箇所にコメントの通り50行程度の処理を書いた場合、コードの量が2倍近くになります。
また、そのコードに修正が発生した場合、修正箇所が2倍になります。
この処理が何度も呼び出される場合、更に効果があります。

参考：JavaScriptで関数を使う方法【初心者向け】 | TechAcademyマガジン

Answer 3

質問が追加されていましたね
すいません

確かに、関数を使用しなくても記載は出来ます。
こうなると、関数が解り辛いですかね？

関数は主に、同じような処理や複雑な処理の場合に使用します。
function game(str){
return "Game is" + str;
}
上記の例で頑張ってみます。
例えば、game が１０箇所から使用されているとします。
後から、"Game is" を "ゲームは" に変更しようとした場合
関数になっていれば、game の中を変更すれば全て解決しますが
１０箇所が、game を使用していない場合、"Game is" + data になっている場合は
全１０箇所を全て修正しなければいけません。
（この場合、置換すれば問題ほぼ無いですが・・・）

この様な場合があるので、関数を使用して、結果を返しているのです。

Answer 4

return 文の概念ですか
何かしらの結果が返ってくるでは解りにくいですかね？

function game(str){
return "Game is" + str;
}
上記の場合は、与えられた引数（str）と "Game is" を結合した結果を呼び出し元に返しています。
document.write(game(data) ← ここに結果が返ってきます。);
関数を使用しない場合だと
document.write("Game is" + data);
になりますね。

例えば、２つの数値をプラスした結果を取得したい場合
（ま～このような場合にfunction にするのはほぼ無いと思いますが）

    funtion plus(a,b){
        return a + b;
    }

上記、plus に 引数 を２つ与えてあげれば、プラスした結果が返ってきます。
document.write(plus(1,2));
結果 3
こんな説明で解りますかね？

Comments

[退会済みユーザー]

ご回答ありがとうございます
すごく理解できました！！

Answer 5

関数の途中で帰るときにreturn必要じゃないですか