関数、戻り値、パラメーターとアーギュメント（引数）

今日は、関数について勉強しました。相変わらずDevEdの説明はわかりやすかったです。

実は6月からJavaScriptの勉強を始めて、まず最初につまづいたのが関数のところでした。関数が出てくるまでは、処理結果はConsole.log()で出していたのに、急にreturnが出てきて「はて？」となりました。

また、パラメーターとアーギュメント（引数）も、どちらがどちらがわからなくなっていました←超初心者w

というわけで、一旦簡単な言葉と図でまとめてみようと思います。

関数とは？

関数とは：
複数の処理を一つにまとめて、名前をつけたもの
※一つの動作に対しても、複数の動作に対しても関数にまとめることができる

YouTubeやサイトには「関数とは、複数の処理を一つにまとめて名前をつけたもの。何度でも再利用できる便利なもの」と説明されています。

何事もイメージで捉えがちな私は、何か現実的な例えはないかと考えたところ、洗濯機の『洗濯ボタン』が関数なのではと思い当たりました。

つまり、『洗濯ボタン』を押すだけで、『洗い→すすぎ→脱水』の3つがこの順番で自動で行われ、押すたびに順番が変わるなんてことはありません。そして、何度でも利用できて便利！関数はこれで説明できると思いました。

もう一つつまづいていたところがあって（たくさんあります笑）それは、関数とは複数の処理がまとまったものだけだと勘違いしていました。

上記の例でしたら、洗濯ボタンだけが関数だと思い込んでいました。正確には、「洗う」機能も「すすぐ」機能も「脱水」機能も一つずつ独立した関数です。これが上のところに書いた「※一つの動作に対しても（「洗う」機能だけ、「すすぐ」機能だけ、「脱水」機能だけ）、複数の動作に対しても（3つをまとめた洗濯ボタン）関数にまとめることができる」というわけなのです。

戻り値の意味

次に戻り値（return）の意味を見ていきます。

JavaScriptの関数はこのように、左から右へプログラムが進んでいきます。こちらが全体図です。

最初に、関数addに数値の3と5を渡して、関数の中に入ったところをコードで書くとこんな感じになります。

function add(a, b) {
  console.log(a, b);
}

add(3, 5); // 3, 5

この時点では、ただ2つの数値が入ってきただけという状態です。

次に、add関数内で2つの数値を足し算します。

function add(a, b) {
  // console.log(a, b);
  a + b;
}

add(3, 5);

上のコードを書いて保存した後、コンソールの方にadd(3, 5); と書いてEnterを押したところ、3と5を足した答えの8が返ってくると予想していましたが、undefinedが返ってきてしまいました。

ここがよくわからなかったポイントだったのですが、実は関数は数値を受け取って、計算なり何なりの処置をした後、こちらが「戻り値を出して」と命令しない限り、沈黙したままなのだそうです。

図で示すと、この場合はこちらの流れを辿ってことになります↓

では、3と5を足した答えの8を返してもらうにはどうしたらいいか？

関数から値を戻してもらうには、returnを書くというのが答えです。

function add(a, b) {
  return a + b;
}

add(3, 5);

これでようやく8を表示することができました。

図で示すと、この流れになりますね↓

パラメーターとアーギュメント（引数）の違い

function greet(name) {
  console.log(`Hello ${name}!`);
}

greet('John'); //nameはパラメーター、'John'はアーギュメント

次に、パラメーターとアーギュメントの違いについて書いてみます。

パラメータ（Parameter）： 関数定義時に関数が受け取るべき引数の名前を指します。
アーギュメント（Argument）: アーギュメントは、関数呼び出し時に渡される値や式のことを指します。

つまり、パラメーターの方は、受け取る側の箱を準備しておくという感じですね。だから、何でも受け取れるように、汎用的な名前にしておくと良いそうです。

こちらの関数＝炊飯器の例えがわかりやすかったです。よかったら、ご参照ください。

まとめ

独学でやっていると、変数や配列、関数などが全て同じ難易度であるかのように登場します。

「関数はJavaScriptの中でも難しいパートから、覚悟せよ」「慣れるまで時間がかかるから焦らずにやってね」と最初に言ってもらえたらどんなに違かっただろうと思いました。

でも、一つずつ紐解いていくと、JavaScriptの関数がどんな風に読み込まれ、値を返していくのかが、最低限ですが理解できました。

千里の道も一歩からとはこのことですね。引き続き、基礎編を続けます。