こんにちわ。
MENTAで初心者向け（というかプログラミング未経験者向け）にJavaScriptを教えている中で、
「関数の返り値や引数についての理解がむずかしい！」と相談され、長々と説明することがおおいので、
すこしでも教える時間を短くできるように、どうせ長々と説明するなら動画にしよう、ということで動画を撮影してみました。
カンペもないはじめてのYouTube撮影でぐだぐだになってしまったので、
要点はQiitaにまとめることにしました。（本末転倒ｗ）
返り値や引数を学びたいときは、使うときのやりかたと、作るときのやりかた
別々に分けて理解したほうがわかりやすいのではないかな？と思い、別々に解説しています。
また、使い方の章では、実際にJavaScriptにもともと存在している関数を例に説明します。
-
String()･･･数値を渡しても配列を渡しても、文字列に変換して返してくれる（返り値にしてくれる）関数。
言い換えると、返り値は「変換後の値（=文字列）」となる。 -
console.log()･･･検証ツールの「コンソール」画面に値を表示する関数。
返り値が無い（=undefined）だけでなく、検証ツールで直接使用すると、
値を表示する処理と、返り値の表示の２つが表示されてしまい混乱するので、
返り値を学ぶときに使うのには適していない。
※ この記事では、すでに関数自体については理解しているという前提の話をしてしまっています。
もしコメント欄の質問などで、関数自体の説明もしないと、と思うようなコメントが多かった場合は
次回はその解説もしようかな？なんて考えてます。
※ 例では変数の名前に変数や文字列、関数の名前に関数という 日本語の名前をつかっていますが、
実際のコードでは日本語の名前は極力使わないほうがトラブルが少ないです。
（どんな名前にしてもいい部分だ、ということが伝わるように漢字にしています。）
返り値
使い方
返り値は、関数を実行したあと、その実行部分に置き換わるようなイメージの動きをします。
たとえば下記のような書き方をすると
/*例文その1*/ String(123);
/*例文その2*/ console.log( String(123) );
/*例文その3*/ let 変数 = String(123);
下記のように書いたときと同じような動きになります。
/*例文その1*/ "123";
/*例文その2*/ console.log( "123" );
/*例文その3*/ let 変数 = "123";
つまり、
例文その1 → 何も起こらない
例文その2 → 「コンソール」に"123"という文字列が表示される
例文その3 → 変数という名の変数に、"123"という文字列が代入される
という動きになります。
ちなみに、関数の返り値は、関数の中の処理が実行されたあとに返ってくるものなので、
たとえばconsole.log()であれば、「コンソール」に値を表示する という動作が行われたあとに、
console.log()と書かれていた部分が、返り値に置き換わる、という動きになります。
たとえば下記のような書き方をすると
/*例文その1*/ console.log(123);
/*例文その2*/ console.log( console.log(123) );
/*例文その3*/ let 変数 = console.log(123);
「コンソール」に値を表示する という処理が動いたあとに、
下記のように書いたときと同じような動きで処理が進む、ということになります。
※冒頭でお伝えしたとおりconsole.log()には返り値はないので、undefined（データが存在しないことを表す値）が返り値になります。
/*例文その1*/ undefined;
/*例文その2*/ console.log( undefined );
/*例文その3*/ let 変数 = undefined;
つまり、
例文その1 → 「コンソール」に123という数値が表示される → その後、何も起こらない
例文その2 → 「コンソール」に123という数値が表示される → その後、「コンソール」にundefinedという値が表示される
例文その3 → 「コンソール」に123という数値が表示される → その後、変数という名の変数に、undefinedという値が代入される
（ちなみに２番は、その後さらにconsole.log()の返り値であるundefinedに置き換わるような動きになります。（結局何も起こらないですけど。））
この動きのおかげで、
計算をして処理の結果を返してくれるような関数であれば、
その結果を変数に代入してあげたり、
if文と組み合わせることで条件式に利用するなど、いろんな処理の組み合わせができるようになります。
作り方
String()は文字列を返すとか
console.log()は返り値がないとか言いましたけども、
これらは元々存在する関数なので、返り値も元々決まっていました。
次は、自分で関数をつくる場合には、
返り値をどうすれば指定することができるのか、というのを解説します。
自分で関数をつくるとき、返り値を指定するにはreturnという命令を使います。
（console.log()のように、返り値がなくていい場合はreturnを使わなくても大丈夫です。）
const 関数 = ()=>{
return "123";
}
※ 関数の定義の書き方は const 関数 = function(){ から始まるような書き方や、
function 関数(){ から始まるような書き方もありますが、
この記事で使ってる程度のシンプルな処理の場合、どの書き方でも同じ動きになるので、
自分で書いて試してみるときは、どの書き方で試しても大丈夫です。
このように、返り値を指定した関数を作ることで、
たとえば下記のような書き方をすると
/*例文その1*/ 関数();
/*例文その2*/ console.log( 関数() );
/*例文その3*/ let 変数 = 関数();
下記のように書いたときと同じような動きになります。
/*例文その1*/ "123";
/*例文その2*/ console.log( "123" );
/*例文その3*/ let 変数 = "123";
つまり、
例文その1 → 何も起こらない
例文その2 → 「コンソール」に"123"という文字列が表示される
例文その3 → 変数という名の変数に、"123"という文字列が代入される
という動きになります。
今回のように、毎回まったく同じ値を返す関数であれば、
わざわざ関数にせず、変数に定義しておけばいいという話になりますが、
次に解説する「引数」と組み合わせたり、毎回ランダムな結果を返す処理にしたり、
ユーザーがHTMLの画面で入力した文字・押したボタンなどによって返す値がすこし変わってくるような
返り値が毎回微妙に違ってくるような処理は、関数にしておく必要があります。（←の意味がよくわからない場合は、変数や関数についての解説も作ったほうがよさそうだと思うので、コメントで教えて下さい。）
引数
使い方
引数を使うことで、
関数を実行するとき、どんな値（データ）に対して、その関数の処理を実行するのかを、指定することができます。
たとえば下記のような引数を渡して実行すると
/*例文その1*/ console.log(123);
/*例文その2*/ console.log([1,2,3]);
/*例文その3*/ String(123);
/*例文その4*/ String([1,2,3]);
下記のように処理してくれます。
例文その1 → 123という数値型の値を、「コンソール」に表示してくれる
例文その2 → [1,2,3]という配列型の値を、「コンソール」に表示してくれる
例文その3 → 123という数値型の値を、文字列型に変換して返り値にしてくれる
（結果、"123"という文字列が返ってくる）
例文その4 → [1,2,3]という配列型の値を、文字列型に変換して返り値にしてくれる
（結果、"1,2,3"という文字列が返ってくる）
この「引数」という仕組みがあるおかげで、
やってる事はだいたい同じだけど、もととなる情報だけ毎回微妙に違う、という処理が
量産できるようになります。
作り方
String()は引数として文字列に変換したい値を受け取るとか、
console.log()は引数として「コンソール」に表示したい値を受け取るとか、
これらは元々存在する関数なので、どういう引数を受け取って、どのように処理するのか元々決まっていました。
次は、自分で関数をつくる場合には、どうすれば引数を受け取ることができて、
どのように使うことで毎回微妙に違う処理をつくることができるのか、というのを解説します。
関数をつくるとき、引数の受け皿を設定するには、最初のカッコの中に、なんという引数名にするのかを書き込みます。
const 関数 = (引数)=>{
const 文字列 = String(引数);
console.log( 文字列 );
}
※ 関数の定義の書き方は
const 関数 = function(引数){ や function 関数(引数){
のような書き方でも大丈夫です。
このように書くことで、下記のような関数になります。
- 関数の処理の中で「引数」という名前の変数が使えるようになる。
- 「引数」という変数には、関数が実行されるときにカッコの中に入力された値が、代入される。
たとえば下記のように実行された場合
/*例文その1*/ 関数(123);
/*例文その2*/ 関数([1,2,3]);
下記のような動きになります。
例文その1 → 123という数値が文字列に変換され、「コンソール」に表示される。
（結果：「コンソール」に"123"という文字列が表示される。）
例文その2 → [1,2,3]という配列が文字列に変換され、「コンソール」に表示される。
（結果：「コンソール」に"1,2,3"という文字列が表示される。）
おわり
いかがでしょうか？
動画の内容はグダグダになってしまいましたが、
おかげでQiitaに書く内容は洗練できたような気がするので
結果オーライだと思っています。笑
引数や返り値が理解できていない人に理解してもらうのは、
一筋縄ではいかないことがおおいので、動画をみて、この記事を読んでも、
まだわからない！という意見がありましたら、コメントでお寄せください。
スパッと理解してもらえる方法を追求していきたいと思います。