JavaScript 戻り値について

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
コロナ休みでJavaScriptを勉強し始めているのですが戻り値についてうまく理解することができません。
あるサイトでは関数の処理の結果と書いてありあるサイトでは引数と戻り値はセットと書いてありどのように理解していいのかわかりません。
function square(input){
return input*input;
}

square(3)
の戻り値が9というには分かります。

しかし
function square(input) {
console.log(input*input)
}

square(3) という関数の戻り値も9という理解でいいのでしょうか？

その場合
function hello(){
console.log(‘Hello’);
}

hello()という関数の戻り値もHelloでいいのですか？
まだ始めたばかりで調べてもなかなか結論が出ずに困っているので是非助けていただけるとありがたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

square(3) という関数の戻り値も9という理解でいいのでしょうか？

違います。関数内にreturnを書かなかった場合、undefinedという特殊な値が返ります（もっとも、必ずundefinedを返す関数について、返ってくるundefinedを使う場面はほぼないので、「値を返さない」とみなされることも多いです）。

hello()という関数の戻り値もHelloでいいのですか？

こちらも何も返さない（undefined）です。

---

よくある誤解ですが、「関数の実行結果」と「関数の返り値」は別の概念です。

Comments

[退会済みユーザー]

関数の実行結果をreturnで返したものが関数の返り値という理解であっていますか、、?!

[maisumakun]

実行内容とは関係なく、returnの後に書いたものが返り値です。たとえば、「return 3;」のように書けば、（このreturn文を通る限りにおいて）この関数の返り値は「3」です。

[退会済みユーザー]

わかりました！いろいろなサイトを見ていたら処理結果をreturnで戻り値として返す処理をしていることが多いのですがそれはなぜですか？

[maisumakun]

> 処理結果をreturnで戻り値として返す処理をしていることが多いのですがそれはなぜですか？

処理結果を受け取らないと、結果を他の目的に使えないからです（実用的には、「いつも同じ値を返す」ような関数は、「どうしてもそういう関数を渡さないといけない」場面を除いては作りません）。

[退会済みユーザー]

非常に申し訳ないのですが、簡単な例を教えてもらえないですか？

[maisumakun]

たとえば、Math.sqrt(2)として、「計算はするけど返り値なし」では、算出した平方根を使うことが全くできないです。

[退会済みユーザー]

戻り値で返すからこそ様々な変数を代入して関数外で使えるってことですかね！？！？

Answer 2

「return 文 が省略された（全く存在しない）ときは、暗黙的に return undefined;　が関数ブロックの最後につく」と覚えてもいいかもしれません。

function square(input) {
  console.log(input*input)
  // return 文が記述されていない
}
console.log( square(3) ); // undefined

また、console.log(‘Hello’); は文字列を示す記述ではありません。
Hello を囲う記号が間違っています（MDN テキストを扱う）

function hello(){
  console.log("Hello"); // ダブルクォートで囲む例
  // return 文が記述されていない
}
console.log( hello() ); // undefined

Comments

[AkitoshiManabe]

MDNのページ左側にあるナビゲーションに「完全な初心者はこちらから」というページが案内されていますので、「JavaScriptの基本」は通読されるといいかもしれません。

[退会済みユーザー]

return undefinedが暗黙的についているので３を代入した９と戻り値のundefinedが表示されるのですね！

このページは知りませんでした！熟読します！ありがとうございます！

Answer 3

こうするとわかるのでは？

Comments

[yambejp]

const square1=input=>input**2;
console.log(square1(3));

const square2=input=>{console.log(input**2)};
console.log(square2(3));

[maisumakun]

返り値の扱いにおいて、普通の関数とArrow Functionでは異なってくる部分があります。質問者がfunction表記である以上、ここでArrow Functionの例を出すのは適当でないと思われます。

[yambejp]

いや、逆に「コロナ休みでJavaScriptを勉強し始めている」と言っているのですから
むしろ積極的アロー関数を覚えるべきだと判断しました
そのへんは見解の相違でしょうね

[退会済みユーザー]

関数1は戻り値を返していて関数２は関数の処理結果をコンソールに実行しているということですよね？！？
この場合では結果は同じだけどやり方が違うということですか？？

[yambejp]

関数1は9が戻ってきて、console.logで表示
関数2は関数内でconsole.logで表示し、
戻り値がないので、外側のconsole.logはundefinedを表示しています
アロー関数の実行部分{}はreturnを書かないと値を返しません
（便宜上undefinedを返す）

[退会済みユーザー]

戻り値を返さないと関数の処理結果はその関数内にあってほかのところでその処理結果を使えないから戻り値を返すという理解はあっていますか？

[yambejp]

「ほかのところでその処理結果を使えないから戻り値を返す」
ちょっと意味がわからないですね
「なにも返ってこない」挙動が「undefinedが返ってきてる」のと同等ということです。

[退会済みユーザー]

関数外でという意味です！すいません