JavaScriptにおけるreturnの使い方･意義について

Question

JavaScriptにおけるreturnの使い方･意義について

現在ProgateでJavaScriptの学習をしています。
そこでreturnという概念が出てきたのですが、正直理解できません。
具体的には、｢returnを使うと何ができるのか｣、｢使わない場合と比べてどんな利点があるのか｣、｢使わない場合に出来ないことはどんなことか｣等がわからず困っています。

例えば、下の例であれば、どちらも結果としては同じ｢4｣が返ってきます。
であれば、下のようにreturnを用いて記述する理由は何なのでしょうか。
恥ずかしながら、Progateのスライドや過去の似たような質問を読んでもよくわかりませんでした…。
具体例を挙げてご説明いただけると大変助かります。よろしくおねがいします。

該当のソースコード

returnを使わないコード

const add = (a,b)=>{
console.log(a+b);
};
add(1,3)

returnを使ったコード

const add = (a,b)=>{
return a+b;
};
const sum = add(1,3);
console.log(sum);

Comments

[stdio]

returnはプログラムの基本中基本なので理解出来ないとほざくようなら辞めてしまった方が早いですよ。

[miyabi_pudding]

stdioさん>厳しくもその通りですね。ほぼ全言語にある概念ですしね。

Answer 1

どちらも結果としては同じ｢4｣が返ってきます。

前者の場合、console.logが作り付けなので、この「4」を関数の外から使うことができません。

後者の場合、受け取った4は、console.logするだけではなく、関数から帰ってきた側で他の計算に使うことも可能です。

Comments

[code320]

maisumakunさん、早速のご回答ありがとうございます。
ご回答を受けて自分なりに、まとめてみたのですが、

returnを使わないコードは
addという定数があり、aとbを足した結果を戻り値として返してくれるという機能を持っている。
なのでこの定数addに、引数として1と3を入れると、結果として4(戻り値)が返ってくる。

returnを使ったコードは
returnを使わない上記のコードの動きに加えて、その結果を定数(この場合はsum)として定義して、別の計算にも使えるようにしている。
という理解でよろしいですか?

また、｢受け取った4を他の計算に使うことも可能｣というのは、以下のような例ですか?

const add2= (c,d)=>{
console.log(c+d);
};
add2(sum,3); //4が代入されたsumと3を足して7

[maisumakun]

前者は内部でconsole.logをしているだけなので、「戻り値」はありません（無理やり取ればundefinedという値になっています）。

[m.ts10806]

既に良い回答が出そろっているのでこちらでぶら下がらせていただきますが、
質問者さんはもっとたくさん検証のコードを書いてみたほうが良いと思います。
そこで「これはできない」「これはできる」から「こういう使い方もできそう」と展開されるはずなので、ついた回答をヒントに自分でも色々検証してみてください。

[stdio]

mts10806さんに乗っからせて頂きます。

JavaScriptを最初にやろうとするから迷ったのかな？
C言語なら戻り値の型指定しないといけないからまずそっちを勉強した方が早そうですね。
基本をしっかりと身に着けていない状況でJavaScriptを行うのは質問者さんにとっては難しい事だと思いました。Pythonなら余計に迷っていたな。

Answer 2

プログラミング言語は数学の世界の概念を使ったものが多く用いられています。
関数も数学由来の概念です。

関数 (数学) - Wikipedia

数学における関数とは、かつては、ある変数に依存して決まる値あるいはその対応を表す式の事であった。

関数に「ある値」を渡してやると、結果が値として帰ってきます。

結果が帰ってこない、つまりreturnが存在しない処理の塊を「サブルーチン」と呼びます。
JavaScriptでは関数もサブルーチンも同じfunctionで作ります。
混同しがちですが、出来るだけこの数学の用語の関数を意識すると良いです。

ちなみに、VBAなどの言語では、
値が帰ってこない「サブルーチン」というものが関数とは別に存在します。

---

なぜfunctionを定義する際、
出来るだけ数学の意味と同じく値を返す方が良いのかといえば、
テストしやすいからです。

例えばChrome等のブラウザでJavaScriptの動作チェックをするようにします。
例題としてfizzbuzzを作ってみましょうか

var fizzbuzz = function (it) {
  if (it % 3 === 0) {
    return 'Bizz';
  }
  if (it % 5 === 0) {
    return 'Buzz';
  }
  return '' + it;
}

おおっと、何処かおかしい気がしますが、スルーしてくださいね。
これのテストを書いて行きます。
JavaScriptにはconsole.assertというものがあり、これによりどういう動作を期待するのかを実行出来るコードとして残して置くことが可能です。

// 実験的に使ってみよう
console.assert(1 === 1, '1 is 1!!');
// [何も表示されない]

console.assert(1 === 2, '1 is 2!!');
// Assertion failed: 1 is 2!!

なるほど、中の式がfalseな場合だけ第二引数の文字列と共に怒ってくれるんですね。

var fizzbuzz = function (it) {
  if (it % 3 === 0) {
    return 'Fizz';
  }
  if (it % 5 === 0) {
    return 'Buzz';
  }
  return '' + it;
}

console.assert(fizzbuzz(1) === '1', '1 is "1"');
console.assert(fizzbuzz(2) === '2', '2 is "2"');
console.assert(fizzbuzz(3) === 'Fizz', '3 is "Fizz"');
console.assert(fizzbuzz(4) === '4', '4 is "4"');
console.assert(fizzbuzz(5) === 'Buzz', '5 is "Buzz"');
console.assert(fizzbuzz(6) === 'Fizz', '6 is "Fizz"');
console.assert(fizzbuzz(7) === '7', '7 is "7"');
console.assert(fizzbuzz(8) === '8', '8 is "8"');
console.assert(fizzbuzz(9) === 'Fizz', '9 is "Fizz"');
console.assert(fizzbuzz(10) === 'Buzz', '10 is "Buzz"');
console.assert(fizzbuzz(11) === '11', '11 is "11"');
console.assert(fizzbuzz(12) === 'Fizz', '12 is "Fizz"');
console.assert(fizzbuzz(13) === '13', '13 is "13"');
console.assert(fizzbuzz(14) === '14', '14 is "14"');
console.assert(fizzbuzz(15) === 'FizzBuzz', '15 is "FizzBuzz"');

これを実行した結果はご覧の通り

Assertion failed: 15 is "FizzBuzz"

これに気がついて関数fizzbuzzをこのように修正して事なきを得ました。

var fizzbuzz = function (it) {
  if (it % (3 * 5) === 0) {
    return 'FizzBuzz';
  }
  if (it % 3 === 0) {
    return 'Fizz';
  }
  if (it % 5 === 0) {
    return 'Buzz';
  }
  return '' + it;
}

// テストコードもリファクタリング
[
  {it: 1},
  {it: 2},
  {it: 3, expected: 'Fizz'},
  {it: 4},
  {it: 5, expected: 'Buzz'},
  {it: 6, expected: 'Fizz'},
  {it: 7},
  {it: 8},
  {it: 9, expected: 'Fizz'},
  {it: 10, expected: 'Buzz'},
  {it: 11},
  {it: 12, expected: 'Fizz'},
  {it: 13},
  {it: 14},
  {it: 15, expected: 'FizzBuzz'}
].forEach(({it, expected}) => {
  if (!expected) expected = '' + it;
  console.assert(fizzbuzz(it) === expected, `${it} is "${expected}"`);
});

はい、何も出力されなくなりました。

---

上記のテストのような事は、
関数内で直接console.logを実行して、何もreturnしないサブルーチンでは実現できません。

このように別の用途で使う可能性のあるものは、
出来るだけ数学の意味に近い関数(returnする)で作るようにしてくださいね。

Answer 3

関数が戻す結果をreturnで行っているだけですね
いわゆるブラックボックス理論で120円入れると缶コーヒーがでてくる

自動販売機(120円);

で、自動販売機は中で「return 缶コーヒー」しているわけです

ちなみに例示いただいたサンプルの場合通常はreturnで書きません

const add= (a,b)=>a+b;
const sum = add(1,3);
console.log(sum);

Answer 4

たくさんのご回答ありがとうございます。
すべて読ませていただきましたが、現時点ですべてに返信できそうにありません。
mts10806さんがおっしゃるように経験が不足している上に、otolabさんのおっしゃるように、もっと基本的･根本的なところが理解できていないのかもしれません。ご迷惑おかけしました。
とりあえず、ご回答を参考にしながら、もっと自分で調べて勉強します。
ここでまとめて、という形で大変申し訳ありませんが、みなさんにお礼申し上げます。本当にありがとうございました。

Answer 5

returnの意義というより、関数とはなにかという方向から考えたほうが良いかもしれないですね。