質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.86%

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

解決済

回答 5

投稿

  • 評価
  • クリップ 1
  • VIEW 384

code320

score 3

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);
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • stdio

    2019/05/07 12:14

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

    キャンセル

  • miyabi_takatsuk

    2019/05/07 14:09

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

    キャンセル

回答 5

+10

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/07 13:08

    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

    キャンセル

  • 2019/05/07 13:10

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

    キャンセル

  • 2019/05/07 13:48

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

    キャンセル

  • 2019/05/07 14:03

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

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

    キャンセル

+6

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

関数 (数学) - 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する)で作るようにしてくださいね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

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

自動販売機(120円);


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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

-1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る