javascriptのreturnの使い道が理解できません...

Question

演算子と制御文を一通り終え関数に入ったのですがjsのreturnの使い方がいまいち理解できません

function menseki(r){
  var m = 3.14 * r * r;
  return m;
}ｗ

var m = menseki(5);

自分なりに考えてみたのですが、処理を終えたり新しい処理を始める前にreturnを使うのでしょうか...

それともbreakやcontinueのように一定の処理を飛ばしたり無効にするためにつかうのかわかりません値を返すというのが理解できません。。どこに返しているのですか？

初歩的なことを質問してすみません。。
どなたか教えてください

Answer 1

プログラムというのは関数同士のリレーのようなものです。

例にある処理で言うとmenseki()に5というバトンを渡して、返ってきたバトンにmという名前をつけています。
(名前をつけることを代入といいますね)
処理が終わるまでプログラム上ではmというバトンが存在することになります。

そして、functionの中で名前をつけたバトンは基本的にfunctionの中にしか存在することができません。
(この存在できる範囲をスコープといいます)

名前が同じなのでちょっとややこしいのですがmenseki()の中のmと外にあるmは別ものになります。
中にあるmを外に渡してあげるためにreturnを使ってあげます。

逆に言うと中にあるmは普通にやっても外からは取り出せません。
この処理を行うにはスコープという概念を理解する必要がありますので、必要なときに調べるかまたここで聞いてみると良いと思います。

この返ってきたバトンが返り値と呼ばれ、returnという言葉の意味に通づるわけです。

バトンの中身を知るにはconsole.log(m);としてコンソールに出力するなどして表示させる必要があります。

ちなみにfunctionに渡すバトンを引数(argument)といいます。
効率のよいプログラムというのは少ないバトンで効率よくバトンが回っているものになります。

function menseki(r) {
	// 渡されたバトンにrという名前をつける

	// rを計算した結果の値にmと名付ける
	var m = 3.14 * r * r;

	// `m`というバトンを外に渡してあげる
	return m;
}

// menseki()に`5`という値をバトンで渡して、返ってきたバトンにmと名付ける
var m = menseki(5);

バトンの例えで伝わりましたでしょうか。
この概念はほぼすべての言語に共通しているので頑張って理解してみてください。

Comments

[hirai0110]

質問者ではないのですが、コメントします！
僕もよく理解できていない状態だったので気になって見てみたのですが、
回答者さんの回答はとても丁寧かつ、例えを出してくれたりと工夫してくれてとっても分かりやすかったので思わずコメントしてしまいました！
ありがとうございます！

[tomo_mu]

何を見てもわからなかったのですが、ようやくreturnが何をやっているのかを理解できました。
わかりやすいです！
質問者とは別人ですが、ありがとうございました。

Answer 2

function menseki(r){
  var m = 3.14 * r * r;
  return m;
}

var m = menseki(5);

　ではこれをreturnを使わずに書いてみましょう。

function menseki(r){
  var m = 3.14 * r * r;
}

var m = menseki(5); // undefined

　これではダメですね。
では、直接mに代入してしまうのはどうでしょうか。

function menseki(r){
  m = 3.14 * r * r;
}

var m = menseki(5); // undefined

　あれ、ダメですね。
return文がないため menseki から undefined が返ってきてしまうのが原因ですね。
では、代入をやめましょう。

function menseki(r){
  m = 3.14 * r * r;
}

menseki(5); 
alert(m); // 78.5

　うまくいきました。
では、これを使い回してみましょう。3つの円の面積を求めてみます。

function menseki(r){
  m = 3.14 * r * r;
}

menseki(3);
menseki(4);
menseki(5);
alert(m); // 78.5

　あれ、他の二つはどこへ行ってしまったんでしょう？
そうですね、関数が実行されるたびに上書きされてしまうので、常に一つの値しか持てないんですね。
では、3つの値を持てるように関数を増やしましょう。

function menseki1(r){
  m1 = 3.14 * r * r;
}
function menseki2(r){
  m2 = 3.14 * r * r;
}
function menseki3(r){
  m3 = 3.14 * r * r;
}

menseki1(3);
menseki2(4);
menseki3(5);
alert(m1); // 28.26
alert(m2); // 50.24
alert(m3); // 78.5

　超きもいっすね。100回実行するためには100個書かないといけない。
なんか上手い方法はないでしょうか？

計算が終わるたびに、値を別の変数に取りだしてみましょうか。

function menseki(r){
  m = 3.14 * r * r;
}

menseki(3);
var m1 = m;
menseki(4);
var m2 = m;
menseki(5);
var m3 = m;
alert(m1); // 28.26
alert(m2); // 50.24
alert(m3); // 78.5

　上手くいきました。すっきりですね。
でも、関数呼び出しと代入の2行を書かなきゃいけないのがイマイチですね。1行で終わる方法はないでしょうか。
関数から変数へ直接代入をしていないのはなぜなんでしたっけ？

そうですね、関数が undefined を返してくるからでした。return文を書けば undefined 以外の値も返せるのでそれで書き直してみましょう。

function menseki(r){
  var m = 3.14 * r * r;
  return m;
}

var m1 = menseki(3);
var m2 = menseki(4);
var m3 = menseki(5);
alert(m1); // 28.26
alert(m2); // 50.24
alert(m3); // 78.5

　これでひとまず分かりやすくなりましたね。

retrun文があるといろいろ便利なのがお分かりいただけましたでしょうか？

Comments

[退会済みユーザー]

返信が遅くなってしまいごめんなさい
丁寧に説明して頂いたおかげでやっと理解することができました！
ありがとうございます

Answer 3

既に回答が有りますので補足です。returnだけを考えると難しいかも知れません。
まずfunctionにする理由が有ります。

• 主処理をシンプルに書ける

functionとして小分けできる処理を分離すると、主処理がスッキリして読み易くなる場合が有ります。
javascriptの場合、主処理もfunctionも同じソースに書く慣例もあるので慣れないと初めは読みずらいかも知れません。

• 主処理（または他のfunction）で繰り返し利用できる

簡単な処理ではあまり無いケースですが、こうしたメリットも有ります。

コーディングスタイルの差もありますが、returnが使用される理由に「function化のメリット」が有ります。

Answer 4

蛇足かもしれませんが、
return自体については他の方のご回答で十分かと思いますので、別の面について少しだけ。

ご提示の機能だけだと、functionの存在意義があまり分からないかと思いますので、
色んな「球」を扱いたい場合について、書いてみました。

// クラス定義
// 「r」は半径
var kyuu = function(r){
	// コンストラクタ
	this.pi = 3.14;
	this.r = r;
};
// function定義
kyuu.prototype.ensyuu = function(){
	return 2 * this.pi * this.r;
};
kyuu.prototype.heimenseki = function(){
	return this.pi * this.r * this.r;
};
kyuu.prototype.hyoumenseki = function(){
	return 4 * this.pi * this.r * this.r;
};
kyuu.prototype.taiseki = function(){
	return (3/4) * this.pi * this.r * this.r * this.r;
};

var myKyuu5 = new kyuu(5);
var myKyuu7 = new kyuu(7);
// 結果表示
console.log('半径5の場合 ： 円周'+myKyuu5.ensyuu());
console.log('半径5の場合 ： 平面積'+myKyuu5.heimenseki());
console.log('半径5の場合 ： 球表面積'+myKyuu5.hyoumenseki());
console.log('半径5の場合 ： 球退席'+myKyuu5.taiseki());

console.log('半径7の場合 ： 円周'+myKyuu7.ensyuu());
console.log('半径7の場合 ： 平面積'+myKyuu7.heimenseki());
console.log('半径7の場合 ： 球表面積'+myKyuu7.hyoumenseki());
console.log('半径7の場合 ： 球退席'+myKyuu7.taiseki());

結果

半径5の場合 ： 円周31.400000000000002
半径5の場合 ： 平面積78.5
半径5の場合 ： 球表面積314
半径5の場合 ： 球退席294.375
半径7の場合 ： 円周43.96
半径7の場合 ： 平面積153.86
半径7の場合 ： 球表面積615.44
半径7の場合 ： 球退席807.765

この様になっていた場合、色んな大きさの球を扱う上で、非常に便利になる事が分かるかと思います。
まだクラスの概念は勉強されていないかもしれませんが、functionはクラスがあって初めて大きな価値が出てきますので、
是非頑張ってみて下さい。

ちなみに、この辺りまで理解できれば、大抵のプログラムは読めるようになるはずです！

Answer 5

コードの埋め込みの仕方がわからないので、分かり辛くなってしまうとは思いますが書いてみます
function Gura_house(friend) {
ret = friend + "とぐら"
return ret;
}

title = Factory("ぐり");
console.log(title);

実行結果は"ぐりとぐら"です。
ぐりだけでは寂しいので、Gura_house(ぐらの家）に行ってきて、ぐらと一緒に遊ぶことにしました
既出のSAMURAI-HACKさんの説明がかなり詳しいので、この回答に意味があるかはわかりませんが、関数というのは、大雑把にいうと「トランザクション」です。
日本語訳すると「ひとまとまりの処理」ですね

プログラムで書く
myName = "tukejonny"
というのは、myNameという変数に、"tukejonny"の文字列を代入しろ！という１つの処理ですよね
これが複数まとまっているのが関数で、処理＝加工と捉えれば、加工した結果を返させる事ができます

汚い説明ですし、私自身プログラミング初心者なので正しいとも言えませんが、あくまで私自身がこうとらえているという意見を書いてみました。
ご参考になれば幸いです。

Answer 6

とても丁寧に解説していただき感謝です
初心者の私にも理解できました！
ありがとうございます