巻き上げ – JavaScript での動作を本当に理解したい場合は、これをお読みください.

If you'd like an article please give a thumb as your encouragement is my encouragement as well . Thank you !

変数

var および関数宣言で宣言された変数は、 で宣言された場所と同じように、スコープの先頭に持ち上げられると言われています. The true reality : nothing is lifted up. JavaScript での巻き上げとは、ジャストインタイム (JIT) コンパイラが残りのコードを実行する前に変数と関数の宣言にメモリを割り当て、トップに「移動」したように見せるプロセスを指します.言及する価値があるのは、関数宣言ではなく、関数式が巻き上げられていないことです!

例 1

console.log(age); 
var age;
// undefined (no error thrown)

LET と CONST

let および const で宣言された変数も巻き上げられますが、 var で宣言された変数とは異なり、 let と const は undefined の値で初期化 (別名割り当て) されません.最後の文は非常に危険です.私は自分自身を修正させてください.キーワード let を使用して宣言された変数も undefined の値で初期化されるようですが、いわゆる一時的デッドゾーン (TDZ) [1] に悩まされます.

例 2

console.log(age); // TDZ
let age = 101;
// ReferenceError : { Cannot access 'age' before initialization

一時的なデッド ゾーン (TDZ) の問題を修正するには、例 2 を次のように調整します.

例 2.1

// TDZ
let age;
console.log(age); // # no more error
// undefined

const で宣言された変数は、let と同様のパターンに従いますが、初期値を明示的に指定する必要があり、それ以外の場合は Missing initializer in const declaration がスローされます.

「宣言されたグローバル（ly）」の悪用の定義

開発者、特に初心者は、var で宣言された場合、それはグローバルであるという言葉で遊ぶのが好きです.技術的には依存します!次の例 3 を調べてみましょう.

例 3

var mostGlobal = this; // use keyword THIS (lower-cased) to test scope binding
console.log("global (at most): ", mostGlobal === window);

function lexical(){
    console.log("global scope got penetrated into", mostGlobal)
    var innerThis = this; // not available outside function – that's what it means then said that VAR are FUNCTION-SCOPED
    var innerWindow = window; // not available outside function – that's what it means then said that VAR are FUNCTION-SCOPED
    // console.log(private) // # uncomment to reproduce error i.e. ReferenceError: private is not defined
    function closure() {
    console.log("global scope got penetrated into", mostGlobal)
    // function with preserved data is called closure
    // let's add own variable to closure that will be available within closure and deeper nested functions , but not outside the function variable was declared :
    var private;
    console.log(innerThis, innerWindow, innerThis === innerWindow);
    }
closure();
}
lexical();

NOTE : Exactly due to most globally declared variables such as mostGlobal are most dangerous due to brutal penetration through all levels of functions whenever such functions executed .

RULE OF THUMB : avoid declaring variables with var , use either let or const (at best) although the remaining has its own pros & cons (not discussed in this article)

Concluded : variables declared within global scope (window) using keyword var e.g. var globalMost or window.globalMost automatically become global(-scoped) . Conversely, declared so within N-tuple nested function , it becomes function-scoped by nature which bears resemblance (as if) declared globally , although it's not anymore as it's not available outside the function unless within the function where it was declared and the nested inner N-tuples (Example 3) .

うまくいけば、巻き上げとは何かについて紹介されました.この記事には、関数スコープ (var) とブロックスコープ (let & const) の説明が欠けていることがわかります.ただし、この記事は、スコーピングではなく具体的​​にタイトルが付けられたホイストについて説明することを目的としていましたが、次の 2 つは強く結びついています.その間、スコーピングまたは関連トピックに関する記事は作成中です. スコーピングの詳細については、よく知られている開発者 Tania Rascia が Digital Ocean で公開しているこの記事を読んでください [2].

読んでくれてありがとう.次の記事でお会いしましょう!


参考文献

[1] TDZ by D. Pavlutin

[2] Scopes by Tania Rascia