JavaScript

JavaScriptの関数で戻り値をセットする【return文】

どうも、つよぽんです!

今回は、JavaScriptの「関数の戻り値」について解説をします。

今回の記事は次のような方に向けて書きました。

想定読者
  • 戻り値(返り値)って何?
  • 関数の実行結果を関数を実行した呼び出し元に返したい
  • 「return」を使わなかったときの挙動ってどうなるの?

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
【JavaScript】関数の戻り値(返り値)とは関数を作る際に、関数で実行した結果を呼び出し元に返したい場合があります。この呼び出し元に返す実行結果の値のことを戻り値(返り値)と呼びます。今回は、この「呼び出し元に関数の実行結果を返す方法」を学習します。...

それでは次の内容で話を進めていきます。

今回の内容
  1. 関数の戻り値(返り値)とは
  2. JavaScriptの関数に戻り値をセットする(return)
  3. JavaScriptの関数でreturnを使わなかった場合の動き

 

関数の戻り値(返り値)とは

この章では、「関数の戻り値とは何か?」について解説します。

関数の戻り値とは、「関数の実行結果を関数の呼び出し元に返す値」のことを言います。

戻り値の定義だけ書かれてもわかりづらいと思うので、関数の役割をあらためてふりかえって、関数の役割のどの部分を担っているのか説明していきます。

関数の3つの役割

関数は大きく分けて3つの役割を持っています。

関数の3つの役割
  1. 入力 : 関数の引数
  2. 処理 : 関数の実行内容
  3. 出力 : 関数の実行結果

この内、「①入力」は前回記事で解説した「引数」が担います。

あわせて読みたい
JavaScriptの引数の使い方【関数定義時・実行時の方法】どうも、つよぽんです! 今回は、JavaScriptの「引数」について解説をします。 今回の記事は次のような方に向けて書きま...

②処理」は関数で実装されている処理となり、そして「③出力」が今回のテーマである「戻り値」が担う部分となります。

電卓から考える「①入力」「②処理」「③出力」

さきほど説明した次の3つの役割についてのイメージを掴むために、「電卓」を使ったときの処理の流れを例題として考えていきます。

関数の3つの役割
  1. 入力 : 関数の引数
  2. 処理 : 関数の実行内容
  3. 出力 : 関数の実行結果

例題として「1 + 2 = 」を行ったときの処理を見ていきたいと思います。

まず、「①入力」は「1と2」になります。

次に「②処理」で「1と2」をたし算する処理が実行されます。

最後に「③出力」で計算結果の「3」が電卓上に表示(出力)されます。

戻り値」という言葉は、記事やその他の資料によっては 「返り値」と書かれているものもありますが、どちらも同じ意味です。

JavaScriptの関数に戻り値をセットする(return)

この章では、「JavaScriptの関数に戻り値をセットする方法」について解説します。

JavaScriptで戻り値をセットしたいときは「return」を関数内で使います。

以下の画像は「return」を使った関数を定義したものを説明したものになります。

returnを使ったサンプルreturnを使ったサンプル

上の画像では2つの関数を定義しています。(add関数とsub関数)

add関数とsub関数の実装内容を見ると、どちらにも「return」が使われているのがわかるかと思います。

return」を使うときは「return 呼び出し元に返す値;」の形式で記述します。

上のサンプルコード内の赤枠内の「const result1 = add(1, 2);」はadd関数の処理内容により最終的にはresult1変数に「3」が代入されます。

result1変数3が代入されるまでの流れは次のとおりです。

処理の流れ
  1. 「add(1, 2);」によりadd関数が実行される。
  2. add関数の引数「aとb」にはそれぞれ「1と2」が入る
  3. 「return a + b;」でaとb、つまり1と2をたし算した結果が呼び出し元に返る
  4. ①で行った「add(1, 2);」には③の結果(戻り値)として「3」が返る
  5. result1変数に「3」が代入される

上記の流れが「const result1 = add(1, 2);」を実行したときの流れとなります。

画像の右の「Console」部分を見ると、「console.log(‘たし算の結果その1:’, result1);」として「result1」に「3」が出力されているのがわかるかと思います。

あらためて「return」の使い方をまとめると次のようになります。

return 呼び出し元に返す値;」の形式で記述する。

上の画像内のサンプルコードは以下のリンク先から確認することも出来ます。

returnのサンプル1

JavaScriptの関数でreturnを使わなかった場合の動き

この章では、「JavaScriptの関数でreturnを使わなかった場合の動き」を解説します。

結論から言うと、returnを使っていない関数を実行したときは呼び出し元には「undefined」が返ってきます。

以下の画像はさきほどの「add関数」「sub関数」から「return」を取り除いたものになります。

returnを使わない関数の場合returnを使わない関数の場合

上の画像の赤枠内の関数の内部を見ると「return」が使われいないのがわかるかと思います。

その結果、add関数の実行結果を代入したresult1変数、sub関数の実行結果を代入したresult2変数の出力結果(画像右側のConsole部分)を見ると全て「undefined」となっているのがわかります。

このことから「return」が使われていない関数を実行すると呼び出し元には「undefined」が返ってくることがわかります。

「return」を使っていない関数を実行した場合は「undefined」が呼び出し元に返る

上の画像内のサンプルコードは以下のリンク先から確認することも出来ます。

returnのサンプル2

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. 関数の戻り値とは「関数の実行結果を関数の呼び出し元に返す値」のこと
  2. JavaScriptの関数実行時に戻り値を渡す場合は「return」を使う
  3. 「return」が関数内に使われていない関数を実行した場合は呼び出し元には「undefined」が返ってくる

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【JavaScript】関数の戻り値(返り値)とは関数を作る際に、関数で実行した結果を呼び出し元に返したい場合があります。この呼び出し元に返す実行結果の値のことを戻り値(返り値)と呼びます。今回は、この「呼び出し元に関数の実行結果を返す方法」を学習します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です