【JavaScript】 関数の定義と変数代入（関数式）の違い

僕がJavaScriptと学び始めたとき、関数の定義について次のように感じました。

function a(){};
とか
const a = function (){};
とか、いくつも関数定義の方法用意しとくな！
わかりにくい！！

サンプルプログラムによって関数定義の方法が異なっていて、読み解くのに苦労したものです。

しかし実は、この二つの書き方は目的が異なることを最近になって知りました。
今回はJavaScriptの関数定義についてまとめてみます。

関数を定義するには、関数宣言と関数式の二つの方法があります。
この二つの違いを説明する前に、そもそも「JavaSceiptの関数とは何か？」という点についてお伝えします。

JavaScriptの関数とは

JavaSceiptの関数は、functionオブジェクト（関数オブジェクト）というオブジェクトの一種です。
functionオブジェクトは名前の後に( )をつけることで、関数コードを実行できるという特徴があります。

しかし基本的には自分で作成したオブジェクトと同じものです。
変数に代入したり、引数として渡すことができるのです。

では、関数宣言と関数式についてお伝えします。

関数宣言

functionから始まる文が関数宣言です。

関数宣言はfunctionオブジェクトを作成して、そのオブジェクトのnameプロパティに関数名をセットします。
そして自動的に変数が作成され、functionオブジェクトと関連付けられます。

次のコードは、messageという引数を受け付けるkansuという名前のfunctionオブジェクトを作成しています。

function kansu( message ) {
  alert( message );
}
// ↑kansuという名前の変数が作成される

kansu( kansu.name );

実行すると、アラートで「 kansu 」と表示されます。

関数宣言は、即時関数のような使い方はできません。

function f(){
    let a = 0;
}();

上のコードは、次のようなエラーが発生します。

SyntaxError: expected expression, got ')'

関数式とは

次のコードは関数式です。

const kansu = function( message ){
    alert( message );
};
kansu( kansu.name );

実行すると先ほどと同じように、アラートで「 kansu 」と表示されます。

このコードは、変数kansuに、"function(message){・・・}" という文字列を入れているのではありません。

具体的には、名前のないfunctionオブジェクトが作成され、変数kansuに代入されます。
このとき、functionオブジェクトのnameプロパティに変数名がセットされます。

ただし他の変数に代入した場合、nameプロパティは変更されません。
次のコードを、上記のコードの後に記述して実行してみます。

const kansu2 = kansu;
kansu2( kansu2.name );

アラートで「 kansu 」と表示されるので、nameプロパティが変更されていないのがわかります。

変数への代入するだけでなく、次のようなコールバックに指定した関数も、関数式です。

setTimeout ( function( ){
    alert( "3秒経過" );
},3000);

function(){・・・} で作成されたfunctionオブジェクトが、引数としてsetTimeoutに渡されています。

関数宣言かどうかは、文がfunctionで始まるかどうかによって決まります。

文がfunctionで始まるなら、関数宣言です。
functionで始まらないなら、関数式です。

次の文は ( で始まっているので、関数式になります。

(function kansu(message){
    alert(message);
});
kansu("test");//ReferenceError:kansu is not defined

この関数式により、関数オブジェクトが作成されます。
しかし関数定義なら自動的にkansuという名前の変数が作成されますが、関数式なので作成されません。

そのため、kansuという名前の変数が存在しないので、"kansuが未定義です" という意味のエラーが表示されます。

(から始まるコードは、あまり役に立たないように見えますが、即時関数で使用することが多いです。

(function (message){
    alert(message);
})("test");

作成されたfunctionオブジェクトを即座に( )で実行しています。
上のコード程度では、「alert("test")でいいのでは？」という疑問が出てきますが、テクニックとして知っておいてください。

関数宣言と関数式の違い

関数宣言と関数式はどんな点が異なるのでしょうか。

関数宣言は後ろで記述されていてもOK

関数宣言されている関数は、宣言前でも実行できます。
JavaScriptの仕様では、コード評価時に関数宣言がブロックの一番上に移動します。
この動作を巻き上げ（ホイスティング）といいます。

function kansuB(a){    kansuA(a); };    // 実行時に巻き上げで移動（しているように見える）
function kansuA(a){  console.log(a);};  // 実行時に巻き上げで移動（しているように見える）

kansuA("a");  // 宣言が後ろでも実行できる
kansuB("b");  // 宣言が後ろでも実行できる

function kansuB(a) { // コード上の位置 ↑実行時上へ移動
    kansuA(a);
}

function kansuA(a){ // コード上の位置 ↑実行時上へ移動
    console.log(a);
}

関数式は後ろで記述されているとNG

関数式も、関数宣言と同様に巻き上げがおこります。

ですが実際には、エラーが表示されます。

kansuA("a");//ReferenceError: can't access lexical declaration `kansuA' before initialization
kansuB("b");//ReferenceError: can't access lexical declaration `kansuB' before initialization

const kansuB = function(a){ // コード上の位置
    kansuA(a);
};

const kansuA =function(a){ // コード上の位置
    console.log(a);
};

巻き上げで、次のような変数の移動がおこっています。
しかし移動されただけで、変数に値がなにも入っていません。
何もセットされていない変数を参照したために、エラーが表示されたようです。

const kansuB; // 実行時に巻き上げで変数宣言のみ移動 値未設定
const kansuA; // 実行時に巻き上げで変数宣言のみ移動 値未設定

kansuA("a");  // ReferenceError: can't access lexical declaration `kansuA' before initialization
kansuB("b");  // ReferenceError: can't access lexical declaration `kansuB' before initialization

const kansuB = function(a){ // コード上の位置
    kansuA(a);
}

const kansuA = function(a){ // コード上の位置
    console.log(a);
};

ちなみにconstではなくてvarを使用した場合、値としてundefindがセットされます。
そのためコンソールに「undefind」と表示されます。

いずれにしても、関数式は定義前に使用するべきではありません。

ただし、関数内で使用することは可能です。

上のコードでは、kansuB内でkansuAを実行しています。

この書き方については問題ありません。

問題はkansuBをどこで実行するかです。

const kansuB = function(a){ // コード上の位置
    kansuA(a);
}

kansuB( "a" );  // ReferenceError: can't access lexical declaration `kansuA' before initialization

const kansuA = function(a){ // コード上の位置
    console.log(a);
};

kansuB( "b" ); // b

上のコードでは、最初のkansuB呼び出しでエラーになります。
理由は、 kansuAがまだ未定義のためです。

2番目のkansuB呼び出し時点では、 kansuAに関数オブジェクトがセットされているため、エラーになりません。

同名の関数宣言は上書きされます。
次のコードは、エラーになりません。

function a(){
    console.log("1");
}
function a(){
    console.log("2");
}

a();  // 結果: 2

複数の外部スクリプトを読み込んでいると、同名の関数が定義されている可能性が大きくなります。

デバッグが難しくなるので、即時関数などを使って、グローバル汚染しないように注意する必要があります。
例えば次のようにスクリプトを即時関数内に封じ込めることで、他のスクリプトの影響を減らすことができます。

(()=>{
    function a(){
        console.log("1");
    }
    a();
})();

(()=>{
    function a(){
        console.log("2");
    }
    a();
})();

関数オブジェクトは、作成時に同スコープの変数への参照を保持します。

(function(){
    let a = 0; // ・・・ (1)

    const kansuA = function(){
        console.log(a); // どこでkansuAを実行しても、このaは(1)
    };

    function kansuB(callBack){
       let a = 100;
       callBack(); // kansuAが実行される
    }

    kansuA();              // 定義と同じ階層で実行 → 結果 : 0
    kansuB(kansuA);   // kansuB内でkansuAを実行→結果 : 0→kansuB内のaはkansuAで参照されない！
    
})();

上の例では、kansuA作成時に外側の「let a = 0;」への参照を関数オブジェクト(kansuA)内に作成します。

kansuBにkansuAを渡していますがkansuAの実行では、「let a = 100;」は参照されません。
kansuAが保持している変数aへの参照が使用されます。

JavaScriptはレキシカル環境というものが採用されており、関数が定義された時の状態を維持し続けるのです。

関数宣言も同じことが言えますが、コールバック関数として無名関数を使用するときなど、特に注意が必要な知識です。