JavaScriptのreturnがイマイチ理解できていなかった理由と解説

2023.06.10

恥ずかしながら最近までreturnの使い方をあいまいにした状態で業務を進めていたが、ようやく理解や使い分けが自分の中で明確になってきたので、忘れないようにメモしておく。

returnが理解できなかった理由

javascript returnで検索を書けると、「処理結果を呼び出し元に戻す」と出てくるのだが、これがそもそも理解できなかった。

普段return無しで関数の中にif文を書いて実行しても、その処理は正常に行われていたからだ。

例えるなら、ナルトたちがチャクラを理解していなくても忍術を出せていた時のような感覚に近い。

かなり大まかな概念として、returnは「処理された結果を表示するだけなら不要」といえるが、「その結果を外部で利用する場合に必要」と考えた方がイメージが湧きやすいだろう。

returnが必要なケース

returnは基本的に関数内での処理結果を使って、呼び出し元でさらに何らかの処理を行うときに使う。

下記ではそのフローをまとめている。

  • ①関数を呼び出すと、その処理が行われる(その結果はまだ呼び出し元に反映されない)
  • ②returnに到達したら処理を終了
  • ③関数の実行結果(値)が呼び出し元に返される(※呼び出し元はその値を受け取り、必要に応じて利用できる)
  • ④関数内での計算や処理の結果を呼び出し元に返す場合には、return文を使用する必要がある
  • ⑤処理を実行、表示、その値を利用しない場合は、return文は省略可能

繰り返しになるが、つまり処理結果(値)をもとに何かしらの処理(算出や変数化、イベントリスナーなど)を行いたい場合はreturnを使う必要があるのだが、単純にアクションだけの処理を書いた関数の場合はtrue(もしくは省略)、falseでオッケーだ。

returnとは関数の結果を外部で利用するための手段であり、関数をイベントリスナーなどでコールバックとして使用する場合には必要になってくる。

前回アップしたボタンの表示、非表示でもreturnを使っている+解説をしているので、合わせて読んでもらえれば理解しやすいだろう。

【JS】イベントリスナー、ループ、クロージャを組み合わせてボタンを制御する

PIC UP