JavaScriptのreturnについて

Question

JavaScriptのreturn文についてご教授お願い致します。

<div id="myid">
  <h1>テキスト</h1>
</div>
  <input type="button" value="click onclick="myfunc()">
< sctipt >
  let myfunc = () => {
    let myid = document.getElementById('myid').textContent = 'テキスト１';
  } < /script>

このように記載するとボタンをクリックした際に「テキスト」から「テキスト１」に文章が変化すると思いますが、こちらの文章の中に「return」が入っていないのに動作するのは、なぜでしょうか？

let total = (price) => {
  let tax = 0.08;
  price = price + price * tax;
  return price;
}
console.log(total(100));

このような場合にはreturnを記述しなければ「未定義」になるのはある程度分かったのですが、基本的にfunctionにはすべてreturnを記述すると思っていたので記述しない場合はどのような場合なのか疑問に思い質問致しました。

よろしくお願い致します。

Comments

[m.ts10806]

これは実際のコードですか？
<div id="myid>　　←"を閉じ忘れています。

[m.ts10806]

また、コードにはインデントを付けてください。
https://lab.syncer.jp/Tool/JavaScript-PrettyPrint/

[myksgo]

mts10806様
ご指摘ありがとうございます。
"が抜けており申し訳ございません。
また、インデントのためのツールのリンクもありがとうございます。

[m.ts10806]

できればコードフォーマット機能の付いたエディタを利用されたほうが良いかとは思います。

[myksgo]

普段はVSCodeを利用して記述しているのですが、コードはそちらで書いて張り付けたほうがいいですね。
そのままテラテイルに記述してしまっていたので次回から記述したいと思います。

[m.ts10806]

そうですね。手元のコードそのままでないと質問者さんが直面している問題がそのまま再現できない可能性があります。
エラーなどもそうですが、コピペで提示が基本です。
https://teratail.com/help/question-tips#questionTips3-4-2
https://teratail.com/help/question-tips#questionTips3-5-1

[myksgo]

次回から注意して質問したいと思います。
ご丁寧にありがとうございます！

Answer 1

基本的にfunctionにはすべてreturnを記述すると思っていたので

そんなことはありません。

記述しない場合はどのような場合なのか疑問に思い質問致しました。

関数の戻り値を使わない場合は不要です。

Comments

[myksgo]

otn様
回答ありがとうございます。
今回の場合は戻り値が不要であるため、returnは記述しないでも動くのですね。

Answer 2

document.getElementById('myid').textContent='テキスト１';

↑で#myidに.textContentでテキスト１という文字列を入れています。

基本的にfunctionにはすべてreturnを記述すると思っていた

単に「何かしら処理をして終わり」という使い方もあるのでreturnは必須ではありません。
例えば処理した結果、alert()で結果を出力して終わり、とか。
returnするのではなくグローバル変数に値をつめるだけ、とか。
今回も「文字列を入れて終わり」なのでreturnは必要ありません。

Comments

[myksgo]

mts10806様
何かしらの処理をした結果を返す場合にはreturnを記述し、単に処理して終わりであればreturnを記述しなくても大丈夫との認識でよろしいでしょうか？

[m.ts10806]

「結果を返す」だけがreturnの動機だと弱いので「返す値を呼び出し元で何かしらに使わせる」と覚えてください。
確かに呼び出される関数の方はどこから呼び出されるか、返す情報が何に使われるか知らないのが大前提ではありますが、返すのは「結果を使ってもらうため」なので。

[myksgo]

非常にわかりやすい説明ありがとうございました。
理解できました！

[m.ts10806]

解決されたようで何よりです。