JavaScript での巻き上げ


最初に例を見てみましょう:




var x ;
x = 50;
console.log(x);

// Output: 50


もう一つの例 :

x = 50;
console.log(x);
var x ;

// Output: 50


どちらの場合も出力が 50 になるのはなぜですか.このためには、巻き上げを理解する必要があります.

JavaScript で Hoisting を使って何を理解しますか?



According to MDN :
JavaScript Hoisting refers to the process whereby the compiler allocates memory for variable and function declarations prior to the execution of the code.



簡単な言葉で説明しますのでご安心ください

Simple terms:
Hoisting means MOVING the DECLARATION part of the variables at the top of the code.



今、あなたは疑問に思っているかもしれません😒 .私は怒っているのですか、それとも文の間に2つの大文字の単語を書いたのですか?しかし、この2つの言葉は非常に重要です.

このプロパティのいくつかのキャッチ(巻き上げ)について理解しましょう。


  • 巻き上げは、JS エンジンによって実行される舞台裏のプロセスです.変数がコードの先頭まで表示されるわけではありません.
  • 変数の初期化ではなく、変数の **宣言** についてのみです.

  •  let x ; // Declaration
     var y ; // Declaration
    
    let x = 6 ; // Initialization
    var y = 5 ; // Initialization
    


  • 変数の初期化は、その行のコードが実行された後にのみ行われます.
  • 宣言する前に「let」を使用すると、参照エラーが発生します.

  • car = "Volvo" ;
    console.log(car);
    let car;
    
    // Output:  Reference error.
    


  • 宣言する前に「const」を使用すると、構文エラーが発生します.

  • car = "Volvo" ;
    console.log(car);
    const car;
    
    // Output:  Syntax error.
    
    


  • var 変数のみが「未定義」の値で初期化され、let と const はそのコード行が実行されるまでまったく初期化されません.
  • Arrow 関数とクラスで巻き上げが行われません.

  • クイズ




    var x = 10;
    y = 10 ;
    console.log (x+y);
    var y ;
    
    // Output : ? 
    



    var x = 10;
    console.log(x + y);
    var y = 10;
    
    // Output: ?
    
    



    x = 10;
    y=10;
    console.log(x + y);
    const x;
    let y;
    
    // Output: ?
    
    


    注: 少し圧倒されるかもしれませんが、巻き上げについて理解する必要がある開発者である必要はありません.この問題に取り組む簡単な方法は、先頭で変数を宣言するだけです.

    このブログは以上です.それまでは次のブログでお会いしましょう.

    コメントセクションでこれらの質問に答えてください.

    私とつながることができます👇


  • 画像クレジット: Kissanwat
  • 参照:
    W3school
    MDN