国名入力ゲーム(8/16)即時関数

前回は関数のスコープで関数を使うと変数の有効範囲を決めることができる。
ということを学びましたが、今回はまた関数に戻りますー！
またかよ。と思いましたね。関数嫌いですか？
僕は関数が大好きです。　　　　　　　
もう少し頑張っていきましょう。

javascriptにおける即時関数とは

「即時関数」

なんか速そうですね。
これは多分今まで皆さんが不満に思っていたことを解消してくれる救世主です。
そもそも不満に思っていたかわかりませんが、
今までの関数を使うまでの流れを整理してみます。

関数を宣言する
呼び出す

オッケーこれだけです。
ポイントは関数を作った後、呼び出す必要があるってとこですね。
これが即時関数になった場合はすごいです。

関数を作って実行する

そうなんです、呼び出す必要がないんです。
即実行です。
何が良いかというと、前回学んだスコープです。
関数を作ることで変数の有効範囲を限定できるので、
無駄な変数が残らないんです。
使った変数がすぐ破棄されるイメージです。

即時関数を書いてみます。

//即時関数の構文
(function (引数1,引数2) {
    //関数の中身・・・
}(引数1,引数2...));
 
//その他にも書き方色々あるので
//興味ある方は調べてみてください！

//即時関数の構文

(function (引数1,引数2) {

//関数の中身・・・

}(引数1,引数2...));

//その他にも書き方色々あるので

//興味ある方は調べてみてください！

いつも通りサンプル書いてみます。

(function (name,age) {
    var getName = name;
    var getAge  = age 
    alert(getName);
    alert(getAge);
}('ビリー','29歳'));

(function (name,age) {

var getName = name;

var getAge = age

alert(getName);

alert(getAge);

}('ビリー','29歳'));

実行すると関数即アラート文が出ますね。
これが即時関数です。

即時関数というものすごいめんどくさそうなものをマスターしていただいたのですが、実は以前に学んだconstと今から紹介するletで変数のスコープが制限できます。

例をあげます。

{
    var i = 100;
}
    alert(i);

{

var i = 100;

}

alert(i);

これは100が出ますね。関数じゃないので、スコープはグローバルです。
では次を実行してみましょう。

{
    let i = 100;
}
    alert(i);

{

let i = 100;

}

alert(i);

実行してみましょう。
はいエラー！むむー。
次も実行してみましょう。

{
    let i = 100;
    alert(i)
}

{

let i = 100;

alert(i)

}

これは実行できる！
つまりletではカッコに囲まれた部分のみ有効な変数を作ることができます。
ちなみにletは同じ変数を宣言させない機能もあります

//同じブロック内で同じ変数名を宣言するとNG
{
    let i = 100;
    let i = 100;
}

//同じブロック内で同じ変数名を宣言するとNG

{

let i = 100;

}

//別ブロックで同じ変数名の宣言はもちろんOK
{
    let i = 100;
}

{
   let i = 200;
}

//別ブロックで同じ変数名の宣言はもちろんOK

{

let i = 100;

}

{

let i = 200;

}

続いてconstです。
括弧の中で宣言された場合その括弧の中でのみ変数を利用できます。

{
    const i = 100;
}
    alert(i);  //これはiがスコープ外なのでエラー

{

const i = 100;

}

alert(i); //これはiがスコープ外なのでエラー

{
    const i = 100;
    alert(i)   //これはスコープ内なのでOK!  
}

{

const i = 100;

alert(i) //これはスコープ内なのでOK!

}

即時関数とconstについて

あとは以前習ったconstの機能です。
覚えていますか？
そうです。constは値を書き換えることができません。
つまり括弧の範囲内で宣言されたconstはブロック内で上書きができない変数になります！

//同じブロック内で定数は書き換えられない
{
    const i = 100;
    i = 200;       //constは上書きできない
}

//同じブロック内で定数は書き換えられない

{

const i = 100;

i = 200; //constは上書きできない

}

//別ブロックで同じ定数の宣言はもちろんOK
{
    const i = 100;    //OK
}

{
   const i = 200;    //上のiはスコープ外なのでOK
}

//別ブロックで同じ定数の宣言はもちろんOK

{

const i = 100; //OK

}

{

const i = 200; //上のiはスコープ外なのでOK

}

ものすごいシンプルでわかりやすい。
最近までletとconstのスコープ制限はjavascriptの機能にはなかったのです。
この機能がない時代に先人が編み出したテクニックが即時関数です。

実際、即時関数はいろいろなライブラリ（様々な機能を自由に利用できるようにしたもの）で多く使われており、今後みなさんも即時関数を目にする機会がとても多くあると思いますので、しっかり理解しておきましょう。

まとめ

即時関数は関数の作成と同時に実行される
即時関数を使うことで変数を使い捨てにできる
letとconstと「{}」でブロック変数を実現できる

今回のサンプルで書いた即時関数をブロック変数（letまたはconst）を用いて
書き換えみてください。

(function (name,age) {
    var getName = name;
    var getAge  = age 
    alert(getName);
    alert(getAge);
}('ビリー','29歳'));

(function (name,age) {

var getName = name;

var getAge = age

alert(getName);

alert(getAge);

}('ビリー','29歳'));

次のプログラムは実行するとどのような動きになるか
予想して実行してみてください。

{
    function myalert(i){
      alert(i);
    }

    const i = 100;
}

{
   const i = 200;
}

myalert("@");

{

function myalert(i){

alert(i);

}

const i = 100;

}

{

const i = 200;

}

myalert("@");

Pocket

国名入力ゲーム(7/16)関数演習

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

スコープ授業