【5分で理解】JavaScriptのユーザー定義関数について

こんにちは！
本日はユーザー定義関数について解説していきたいと思います。
JavaScriptの基本を学びたい初学者の方は是非読んでいってください！

📗 関数のイメージ

関数ってよく聞くけど数学苦手マンだからよくわからん！というような私みたいな方もいると思うので、
最初に関数のイメージについてお話します。

関数を英語にすると　function　となります。
functionだけだとピンときませんが、意味を調べると関数の他に機能などの意味があります。

関数のフローは自動販売機によく例えられます。

　　　　　　　　　　　ジュースのボタンを押す
お金を入れる→→選んだジュースが出てくる

コレを関数に比喩すると
お金を入れる　　＝　引数
ボタンを押す　　＝　処理の実行
ジュースが出る　＝　戻り値

というような形になります。
とりあえず、関数は自動販売機みたいな流れで動くというイメージだけ掴んでいただければOKです。

📗 ユーザー定義関数って何？

関数は主に２種類あります。

• 組み込み関数　→　既にプログラムで準備されている関数
• ユーザー定義関数 →　自身で自由に作れる関数

その名の通り、ユーザーが定義した関数のことをユーザー定義関数と呼びます。

基本的な形としては

function test(引数){
　//処理


return　戻り値; //戻り値
}

testという自販機に対して、引数を入れて処理を行い、戻り値(return)が帰ってきます。
実際には引数がなかったり、引数が複数あったりするパターンもありますので、そちらを解説していこうと思います。

📗 関数のパターン

上記で書いたとおり関数の記載には複数のパターンが存在します。
何パターンか紹介していこうかと思います。

###パターン１　引数なし、戻り値なし

function test(){         //引数は無いので（）の中には何も書かない
 console.log('test');    //戻り地も無いのでreturnを書かない
}

test();

コレで実行すると、コンソール上に test と表示されます。
シンプルにconsole.logだけが動いている状態です

###パターン2　引数あり、戻り値なし

const text = '春日部防衛隊ファイヤー！！！'
const text_2 = '救いのヒーローぶりぶりざえもん参上'
 
function getText(string){    //stringを引数に
 console.log(string);        //ここの（）の中身は必ず引数と同じ名前にする必要がある。
}

getText(text);             //勘違いしやすいですが、ここの（）の中身は引数と同じにする必要がありません。

コレを実行すると、春日部防衛隊ファイヤー！！！と出力されます。
このように、変数を代入して使うことが多いです。
またgetText(text_2);とすることで、救いのヒーローぶりぶりざえもん参上と出力されます。
###パターン3　引数なし、戻り値あり
このパターンは少し複雑になります。
下記のパターンで処理を実行した場合、どうなるでしょうか？

function textNumber(){
 return 5 ;
}
textNumber();

一見するとreturnの5が、コンソール上に反ってきそうにも見えますが、
このコードに出力する処理が書かれていないので、何も表示はされません。
しかし、処理自体は行われているのでtextNumberに５という数字自体は入っています。

function textNumber(){
 return 5 ;
}
console.log(textNumber());

このようにconsole.logでかこってあげると５と出力できます。
あるいは

function textNumber(){
 return 5 ;
}
textNumber();                     //この段階で５がtextNumberに入ってる。

const TextNumber = textNumber();   //textNumberを変数TextNumberに代入する

console.log(TextNumber)           //変数を出力する

このように変数化して出力することも可能です！
これでも５が出力されます。

###パターン4　インプット２つ、戻り値あり
今回は足し算の合計を出力するコードを作ります。

function sumNumber(int1,int2){   //int1=4,int2=6が代入される。下記の第一引数、第二引数がそれぞれint1,int2似自動で振り分けられる。
 let int3 = int1 + int2;         
 return int3;
}
const total = sumNumber(4,6);  //第一引数に4を第二引数に6を入れる

console.log(total);

この出力は、10となるのがわかるかと思います。
ポイントは引数と処理の中の文字をあわせることに注意するくらいだと思います。

非常に簡単でしたが、ユーザー定義関数について簡単にパターンと使い方について解説していきました。
今回は以上となります！

📗 次回予告

次回は、組み込み関数についても解説できたらなと思います。

私事ですが、今後はAWS認定ソリューションアーキテクト　アソシエイトに挑戦する予定ですので更新頻度が下がるか、備忘録的にそちらの記事を書いていくかと思われます。

記事を読んでいただきありがとうございました。
間違えている部分などありましたらご指摘のほどお願い致します