JavaScriptでの関数式と関数宣言—違いは何ですか？

JavaScriptでの関数宣言と関数式の違いについて学びます。

これは関数式です：

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

これは関数宣言です：

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

関数の式と宣言はほとんど同じことをします。上記の両方の例では、次のように呼び出しますexecuteMe() 次に、コードブロック{..}内にあるコードを実行します。 。

しかし、違いはあります。彼らが何をするかではなく、どのように それらは実行されます—つまり、順序 それらはで読み取られて実行されます—そしてこれは重要です。

この関数は正常に実行されます：

// Call function declaration
executeMe()

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

ただし、関数はしません 正常に実行されます（エラーがスローされます）：

// Call function
executeMe()

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

最初の例（関数宣言）が機能するのに、2番目の例（関数式）が機能しない理由を理解するには、巻き上げとは何かを学ぶ必要があります。 JavaScriptである場合、それは意味をなし始めます。

巻き上げ

JavaScriptでは、コードは上から下に実行されます。通常、変数はスクリプトファイルでの宣言後にのみ使用できます（順序ごと）が、関数宣言 コードが実行される前に、Webブラウザによって一番上に持ち上げられます。

巻き上げとは、ブラウザのコードインタプリタが常に 関数宣言が呼び出される（実行するように指示される）前に、関数宣言について知っている（読んだ）。

したがって、どこからでも関数宣言を呼び出して実行できます。 JavaScriptファイルでは、関数宣言がスクリプトファイルに物理的に存在する前であっても、順序どおりに行われます。これにより、関数宣言が一意になります。

関数宣言

コードを実行する前に、ブラウザはJSスクリプトファイル全体をロード（読み取り）します。関数宣言は実行順序の最上位に移動されるため、 コードは実際にはインタプリタによって次の順序で実行されます：

// 1. Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

// 2. Call to function declaration
executeMe()

コードがスクリプトファイルに物理的に逆の順序で記述されている場合でも：

// Call to function declaration
executeMe()

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

そのため、スクリプトファイルで定義される前または後に、関数宣言の呼び出しを物理的に行うかどうかは重要ではありません。 JavaScriptは常に関数宣言をロードするため、どちらのアプローチも機能します 関数を実行する前に呼び出し それらの関数宣言に。

関数式は巻き上げられません

関数式は引き上げられません（最初に読み取られません）。関数式は、インタープリターがスクリプトファイルのコード行に到達したときにのみ読み取られます。したがって、関数式が物理的に後に存在する場合 関数呼び出し（順序）を実行すると、ブラウザで実行されるJavaScriptインタプリタはそれを実行できなくなります。

したがって、これは機能しません：

// Call function expression
executeMe()

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

上記のコードでは、関数（executeMe()を実行しようとしているため、エラーが発生します ）ブラウザのコードインタプリタが関数式の存在を知る（読んだ）前に。

コードの順序を入れ替えると、機能します：

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

// Call function expression
executeMe()

上記のコードは、コードの順序が原因で機能します。ブラウザは最初に変数let executeMeを含む行（上から下）を読み取ります これには関数式が含まれています—その後、executeMe()を使用して実行するように求められます 。

どちらを使用する必要がありますか？

重要なのは、関数宣言と関数式のどちらを使用するかではありません。どちらもあなたのキャリアを成し遂げたり壊したりするつもりはありません。一貫性を保つことははるかに重要です。少なくとも同じプロジェクト内で、スタイルを選び、それを堅持します。

さらに重要なことに、関数式を使用するチームに参加する場合は、個人的な好みに関係なく、コードベースの一貫性を保つためにそのレシピに従う必要があります。

関数式を使用する良い例の1つは、より厳密なコード構造を使用するように強制することです。これにより、コードがより予測可能になります。関数宣言は、スクリプト内のどこからでも呼び出すことができるため、寛容です。したがって、 特に複数の開発者が同じプロジェクトに取り組んでいる場合は、コード構造に一貫性がなくなります。

関数宣言を使用する良い例（議論の余地がある）は、他の関数を呼び出す関数があるが、について混乱していて、何らかの理由で順序の混乱のために関数式を実行できない場合です。