JavaScriptの基本的な構成要素の一つに関数というものがあります。

関数を利用することによるメリット

・関数を使うことでコードの再利用が可能になる。
・まとまったコードを定義して、後で実行できる。
・目的ごとにコードを分けておくことができる。

関数は、あらゆる場面で使用し、
JavaScriptでプログラミングをするにあたって必要不可欠な存在です。

例：

6人で人生ゲームをします。

６人それぞれに１つずつサイコロが渡され、毎回それぞれ１回サイコロを振ります。

サイコロの作り方：

・ランダムな1-6の値の整数を作るには？

１、Math.random()
0以上１未満のランダムな少数の値を生成してくれる。
例：0.1.. 0.4.. 0.9.. など

２、生成したランダムな少数の値に必要な範囲の整数を掛ける
（今回のサイコロの例で必要なのは、6までの値なので、6を入れる。）

また、必要な値は１から６までの数字なので、掛け合わせた数字に＋１をする。

Math.random() *(掛ける) 6 + １

３、Math.floor()
小数点以下を切り捨てる。

Math.random() * 6 + 1

先ほど作成した１から６の小数点以下の値を切り捨てる。

Math.floor(Math.random( ) * 6 ) + 1

これにより、１から６のランダムな整数を取得することができます。

この作成したランダムな整数をdieというサイコロを意味する変数に入れます。
また、作成したサイコロを６人に一人ずつ配るとすると、６回同じ作業を書かなければなりません・・・

const die1 = Math.floor(Math.random( ) * 6 ) + 1
const die2 = Math.floor(Math.random( ) * 6 ) + 1
const die3 = Math.floor(Math.random( ) * 6 ) + 1
const die4 = Math.floor(Math.random( ) * 6 ) + 1
const die5 = Math.floor(Math.random( ) * 6 ) + 1
const die6 = Math.floor(Math.random( ) * 6 ) + 1

これでは非常に見づらく、手間がかかるのでよくないコードです。

そこで、同じサイコロを振るという作業を１つの呼び出すものとして作成し、
その作成したものを呼び出せば、無駄なコードを書かず、
他人から見ても読みやすいコードになります。

その同じ作業の内容をまとめておき、別の場所から呼び出すことを可能にするのが、関数になります。

それでは、関数について詳しく見ていきましょう。

関数の書き方

具体的に関数の書き方をみていきます。

関数の書き方のポイント：

１、関数を定義する。
２、関数を実行する。

関数の定義：

関数を扱うには、まず関数を定義（作成）する必要があります。JavaScriptで関数を定義するにはいくつかの方法があります。

関数宣言：

もっとも代表的な関数定義の方法として「関数宣言」があります。
関数宣言は下記のような記法で関数を定義します。

function 「関数名」() {
「処理の内容を書く」
}

例：

function singSong = {
    console.log("ドレミファソラシド")
}

出力結果：

注意点：

上記のコードは関数を定義しただけであり、関数を使用するには、関数の実行をしなければなりません。
なので、出力結果は出ません。

関数の実行：

「関数名」( );

関数の実行には、
作成した関数名の後に()丸括弧をつけて実行してください。

singSong()

出力結果：

ドレミファソラシド

function(関数)の引数

引数とは、関数の入力値のことです。

関数を呼び出す時に、呼び出し側から関数へ値を渡すときに使うのが引数です。
与えられた値に対して別の結果を返すことができるようになります。

つまり、同じ関数でも別の結果を返せるようになるのが、引数を使うメリットです。

使い方：

１、関数を定義する。
２、関数の実行の時の()丸括弧の中に、渡したい値（引数）を挿入して渡す。

定義：　関数を作成する。

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

※この時に書く名前(今回は、name)は統一すること。
この名前(name)のことをパラメータと呼ぶ。引数とは違うもの。※注意。

実行：　渡したい値（引数）を渡す。

greet("Ken")

greet("Aya")

出力結果：

Hello!,Ken!

Hello!,Aya!

複数の引数を渡してみる。

引数は複数渡すことも可能です。

例：

定義：　関数を作成する。

今回は、パラメータとして、name,oldを２つ渡しています。

function greet(name,old) {
    console.log(`私の名前は${name}です。年齢は${old}です。`)
}

実行：　渡したい値（引数）を渡す。
２つの引数を渡す場合、,(カンマ)で区切ることにより複数の引数を渡すことができる。

greet("Ken",22)

greet("Aya",18)

出力結果：

私の名前はKenです。年齢は22です。

私の名前はAyaです。年齢は18です。

※注意引数の渡し方

・渡す順番に注意する。
・渡す数に注意する。

渡す順番：

引数は、複数渡すことが可能ですが、順番には注意する必要があります。

上の例では、name、oldとパラメータが設定されているので、
これを逆に入力してしまうと出力結果が想定していたものと反対の結果になります。

定義：　関数を作成する。

function greet(name,old) {
    console.log(`私の名前は${name}です。年齢は${old}です。`)
}

実行：　渡したい値（引数）を渡す。

greet(22,"Ken")

出力結果：

私の名前は22です。年齢はKenです。

名前と年齢の結果が意図したものではなく、反対になっています・・・

渡す数に注意する：

また、最初に設定したパラメータの数と同じ数の引数を渡さない場合。

JavaScriptではエラーにはなりません。
しかし、関数側の入力しなかった引数を参照すると、undefinedが入っています。

function greet(name,old) {
    console.log(`私の名前は${name}です。年齢は${old}です。`)
}

実行：　渡したい値（引数）を１つ渡す。
ただし、設定されているパラメータは２つnameとoldです。

greet("Ken")

出力結果：

私の名前はKenです。年齢はundefinedです。

この場合もまた、意図した結果ではなく、undefinedが出力されてしまいました・・・

デフォルト値を入力しておく。

このundefinedを解決するために、予め意図した値を入力し、引数を受け取れなかった場合に決めておいた値を出力することも可能です。

定義：　関数を作成する。

作成する際に、予め old = "秘密"と
引数が渡されなかった際の値（デフォルト値）を設定しておく。

function greet(name, old = "秘密") {
    console.log(`私の名前は${name}です。年齢は${old}です。`)
}

実行：　渡したい値（引数）を渡す。


greet("Ken")

出力結果

私の名前はKenです。年齢は秘密です。

return function(関数)の戻り値

戻り値はメソッドや関数などの実行が完了した際に、
呼び出し元に返される値のことです。

計算結果や処理後のデータなど、複雑な計算式などでよく使います。
returnを使うことで 「ある関数で算出された値を別の関数の計算に使う」
といった応用が可能になり、プログラミングの幅が劇的に向上します。

JavaScriptを使いこなすためにも、return文の使い方について深い理解が必要です。

例：

add という関数を作成します。
この関数は、引数で受け取った値を出力する関数です。

定義：　関数を作成する。

function add (x, y) {
    console.log(x + y);
}

実行：　渡したい値（引数）を渡す。

add (1,10)

出力結果：

この出力する値を更に使って別の計算をしたい場合、どのようにすれば良いでしょう？

totalという新しい変数を作成し、そこにaddの計算結果を入れる。

let total = add(1,10);

total

しかし、計算結果が入って欲しいが、
中身はundefinedになってしまいました・・・・

出力結果

undefined

こういった状況。
作成した関数の中身を戻し、再利用する際にreturn(戻り値)を使用します。

function add (x, y) {
    const sum = (x + y);
    return sum;
}

const sum = add(1,10);

sum

出力結果

使い方：

１、関数を定義
２、作りたい変数の計算を作成。
３、値をreturn（戻す）することで、意図した計算結果を関数から戻す。
４、関数を実行する。

今回は、returnしたことで、作成した関数が戻され、うまく値が取得できました。

returnされた時点で関数の実行が終わる。

また、returnの性質として、returnされた時点で関数の実行が終了する性質があります。

例：

先ほどのxとyを足し算した結果を、変数sumに格納するロジックを少し修正してみます。

xとyは計算結果を期待しているので、
パラメータにはnumberの値を必ず入力して欲しい。

そこで、typeOf演算子を使います。
期待するパラメータの値がnumberでない場合、

falseを返すようにロジックを修正します。

function add (x, y) {
    if (typeOf x !== "number" || typeOf y !== "number"){
        return false;
    }
    const sum = (x + y);
    return sum;
}

この場合、パラメータの値が数値でなかった場合は、
計算ができないのでそのままreturnで関数が終了するようになっています。

const sum = add(1,10);

sum

出力結果

上記のように、計算結果を終わらせる性質を使用することもできます。

まとめ：

関数は、さまざまなところで使われ、すごく長いものや複雑なものもたくさんあります。
なので、複雑なものや量が多いものをちゃんと理解し、書けるようになるための最初の勉強としてこの文章を作成しました。

まず関数を書けること、そしてreturnで関数を戻し新しい変数に格納できること。
特にreturnに関しては直感的に理解出来ない部分もあり、学習に凄く時間がかかりました。