[Computer Science] Hoisting

ホストとは?

番転送とは、コードが実行される前に、変数宣言/関数宣言がコードの最上位に昇格したように見えることを意味します.

scopeとは何ですか?

識別子によるアクセス規則の有効範囲

.

識別子(変数、関数、クラス)にアクセスできる範囲があります.

の範囲は、括弧または関数で区切られています.

の範囲をスコプフと呼ぶ.

javascriptエンジンは、コードを実行する前に、実行可能なコードをイメージ化し、区別します(コンテキストを実行するプロセス).

コードが実行される前に変数宣言/関数宣言が保存されているため、参照/呼び出しが宣言より先に行われてもエラーは発生しません.

実行コンテキストは、実行可能コードを実行するために必要な環境を表し、実行前にこれらの実行コンテキストプロセスを経験する.

変数Hosting(var、let、const)

javascriptのすべての宣言がエスケープされます.

let、const、classの宣言を使用して、動作はエスケープが発生しないようにします.

varキーワードで宣言された変数とは異なり、letキーワードで宣言された変数を宣言文の前に参照すると、参照エラーが発生します.

これは、letキーで宣言された変数がscopeの開始から変数の宣言まで一時的な死角領域(Temporal Dead Zone;TDZ)を漏らすためである.

TDZとは?

範囲

、起動点から初期化点まで

の例による

の理解

// 1번 코드
a = 2;
var a;
console.log(a); // ?

上のコードを実行するとどのような結果が得られますか?
var a宣言により、変数が再定義され、デフォルト値undefinedが出力される可能性がありますが、このコードの実行結果は2です.

// 2번 코드
console.log(a); // ?
var a = 2;

上記のコード出力結果は2またはReferenceErrorではなく、定義されていません.
これらの動作を観察するためには,3ステップ経過した変数の生成過程を検討する必要がある.

変数を作成する手順3

1)「宣言フェーズ」(Declaration Phase)

変数を実行コンテキストの変数オブジェクトに登録します.この変数オブジェクトはscope参照のオブジェクトになります.

2)初期化段階
メモリに

変数オブジェクト(Variable Object)に登録されている変数の領域があることを確認します.この段階では、変数はundefinedに初期化されます.

3)分配段階

に初期化された未定義の変数に実際の値を割り当てます.

上記の例に示すように、varキーワードとして宣言される変数には、宣言フェーズと初期化フェーズが同時に含まれる.

スコフに変数(宣言フェーズ)を登録し、メモリに変数のスペースを残し、未定義の方法で初期化(初期化フェーズ)します.

変数宣言文の前に、変数にアクセスして未定義のものを返します.スペクトルに変数が存在するため、エラーは発生しません.

以降、変数付与文に達してこそ、付与されます.

この現象を変数護衛と呼ぶ.

関数宣言vs関数式

関数でも同様にオフセットが発生します.
関数fooの宣言には記号が付けられているので、最初の行でfooを呼び出すことができます.このとき、ホイストリンはスキャンモードで動作します.

foo(); 

function foo() { 
  console.log(a); // undefined 
  var a = 2; 
} 

// 위 코드의 실제 동작 
function foo() { 
  var a; 
  console.log(a); 
  a = 2; 
} 

foo();

関数宣言はこのようにネストされていますが、関数式は異なります.

foo(); // TypeError : foo is not a function

var foo = () => {
  console.log(a);
  var a = 2;
}

変数識別子fooはグローバルスキャンにネストされているため、foo()呼び出しは失敗せず、ReferenceErrorも発生しない.しかしfooにはまだ値がありませんが、foo()は未定義の値を呼び出しようとし、TypeErrorというエラーが発生しました.
📌 関数と変数宣言は反発しますが、まず反発関数宣言を行い、次に反発変数宣言を行うのが特徴です.

foo(); // 1
var foo;

function foo() {
  console.log(1);
}

foo = () => {
  console.log(2);
}

JAvascriptエンジンは、上記のコードを次のように説明します.

function foo() {
  console.log(1);
}

foo();

foo = () => {
  console.log(2);
}

Reference

注意:Hosting–用語辞典|MDN
注意:let, const | PoiemaWeb