国名入力ゲーム(9/16) 関数式

関数はまだまだ続きます。
関数の概念は概ね伝えましたがもう少し細かい部分が
あるので、それは後々説明していきます。

今回は関数の作り方の別バージョンをやっていきます。

javascriptの関数式の作り方

前回は一番オーゾドックスな関数の作り方を学びましたね。

function 関数名(引数){
    return 戻り値
}

function 関数名(引数){

return 戻り値

}

上のような書き方です。
実は関数は別の書き方もできます。
こんな書き方です。

var 変数名 = function(引数1,引数2,.....){
              処理
            }

var 変数名 = function(引数1,引数2,.....){

処理

}

なんか変数に代入してますね。
以前サンプルで作成した消費税込みの金額を返す関数を今回紹介した書き買えてみます。まずは以前の書き方

function incTaxPrice(price){
    var incTaxPrice = price * 1.08;
    return incTaxPrice;
}

//使う時
alert(incTaxPrice(100));

function incTaxPrice(price){

var incTaxPrice = price * 1.08;

return incTaxPrice;

}

//使う時

alert(incTaxPrice(100));

これを書き換えると下になります。

var incTaxPrice = function(price){
                      var incTaxPrice = price * 1.08;
                      return incTaxPrice;
                  }
//使う時
alert(incTaxPrice(100))

var incTaxPrice = function(price){

var incTaxPrice = price * 1.08;

return incTaxPrice;

}

//使う時

alert(incTaxPrice(100))

ほとんど一緒です。難しくない。簡単です。
違うところは変数に関数を入れているというところだけ！
変数に入れることの利点は今はあまり感じないかもしれないですが
今後お世話になる時が必ず来るので頭の隅っこで覚えていてください。

現段階で説明するなら、んー。今まで関数に引数として変数を渡していますね。
変数の中に関数を入れられるということは、関数の引数に関数を入れたりすることができるんです。これは画期的です！！！
オッケーです、今の部分は忘れても大丈夫です。
「とりあえず関数は変数に入る」ぐらいで大丈夫です。

この書き方をする上で注意することは１つです。
function命令で定番の書き方をする場合は関数の定義前に実行処理を書いても問題が発生しません。なぜなら、プログラムを実行する際に関数を先に解析してくれるから！これは前回やりましたね。

//functionで関数定義前に使っても問題なし！
alert(incTaxPrice(100));

function incTaxPrice(price){
    var incTaxPrice = price * 1.08;
    return incTaxPrice;
}

//functionで関数定義前に使っても問題なし！

alert(incTaxPrice(100));

function incTaxPrice(price){

var incTaxPrice = price * 1.08;

return incTaxPrice;

}

関数式の注意点について

今回学んだ変数代入型の場合は必ず関数を変数に入れた後しか実行できません。
なので、下記の書き方はエラーとなります。

//functionで関数定義前に使ったら問題あり！
alert(incTaxPrice(100));

var incTaxPrice = function incTaxPrice(price){
    var incTaxPrice = price * 1.08;
    return incTaxPrice;
}

//functionで関数定義前に使ったら問題あり！

alert(incTaxPrice(100));

var incTaxPrice = function incTaxPrice(price){

var incTaxPrice = price * 1.08;

return incTaxPrice;

}

変数に入れた後は使ってもOKです。

var incTaxPrice = function incTaxPrice(price){
    var incTaxPrice = price * 1.08;
    return incTaxPrice;
}


//代入が住んでいるので大丈夫
 alert(incTaxPrice(100));