JavaScriptの関数の巻き上げ（Hoisting）と宣言の順序

例:

hoistedFunction(); // "Hello, world!"
function hoistedFunction() {
  console.log("Hello, world!");
}

関数式による巻き上げ: 関数式では、変数の宣言が巻き上げられますが、関数自体は巻き上げられません。そのため、関数式を宣言する前に呼び出すと、エラーが発生します。

例:

hoistedFunction(); // エラー: hoistedFunctionは関数ではありません
var hoistedFunction = function() {
  console.log("Hello, world!");
};

変数宣言による巻き上げ: 変数宣言も関数宣言と同様に巻き上げられますが、実際の代入は巻き上げられません。そのため、変数を宣言する前に使用しても、値はundefinedとなります。

例:

console.log(hoistedVariable); // undefined
var hoistedVariable = "Hello, world!";

レキシカルスコープと巻き上げ: JavaScriptでは、関数のスコープは実行時ではなく、宣言時に決定されるため、レキシカルスコープと呼ばれる仕組みがあります。関数の巻き上げは、このレキシカルスコープに基づいて行われます。

例:

var x = 10;
function outer() {
  console.log(x); // undefined
  var x = 20;
}
outer();

上記のコードでは、関数outerのスコープ内で変数xが宣言される前にconsole.log(x)が呼び出されています。しかし、変数xは巻き上げられているため、実行結果はundefinedとなります。

以上がJavaScriptにおける関数の巻き上げと宣言の順序に関する解説です。関数の巻き上げによって、関数の宣言前に呼び出すことができる便利な特性がありますが、コードの可読性や予測可能性のために、宣言の順序を明確にすることを推奨します。