var、let、const、Hoisting

10918 ワード

var、let、const差異


var、let、constの間には、再宣言と再割り当ての違いがあります.
varキーワード自体が変数値を広範囲に再割り当てして宣言できることから生じるコード上の問題で、ES 6には厳格な制限のletとconstが追加されている.
  • var:再割り当て可能、再宣言可能
  • var Var = "Var"
    console.log(Var) // 'Var'
    
    Var = "This is Var"
    console.log(Var) // 'This is Var'
    
    var Var = "This is also Var"
    console.log(Var) // 'This is also Var'
  • let:再割り当て可能、再宣言不可
  • let Let = "Let"
    console.log(Let) // 'Let'
    
    Let = "This is Let"
    console.log(Let) // 'This is Let'
    
    let Let = "This is also Let" // SyntaxError: Identifier 'Let' has already been declared.
    varはvariable、constはconstantから取りますが、letはキーワードがなぜletなのか知りたくて検索してみましたが、たぶんこれらの内容を確認しました.
    https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri
    https://stackoverflow.com/questions/33090193/linguistic-meaning-of-let-variable-in-programming?noredirect=1&lq=1
  • const:再割り当て不可、再宣言不可
  • const Const = "Const"
    console.log(Const) // 'Const'
    
    Const = "This is Const" // TypeError: Assignment to constant variable.
    
    const Const = "This is also Const" // SyntaxError: Identifier 'Const' has already been declared.

    Hoisting


    JavaScriptはInterpreterによってコードを行単位で実行します.
    console.log(Var) // undefined
    var Var = "var";
    
    console.log(Let) // ReferenceError: Let is not defined
    let Let = "let";
    
    console.log(Const) // ReferenceError: Const is not defined
    const Const = "const";
    
    Function() // 'Function'
    function Function(){
      console.log("Function")
    }
    しかし,varで生成された最初の宣言から見ると,varを宣言する前にconsole.ログ(Var)に最初にアクセスしようとすると、エラーは発生せず、undefinedという値が出力されます.これは、Javascriptエンジンがコードを実行する前に、すべての宣言がScopeに登録され、定義されていない値が割り当てられるためです.このように,変数宣言の動作はコードの一番上に引っ張られるようにHostingと呼ばれる.
    Javascriptエンジン変数を3つのステップに生成します.
    1.宣言手順:実行コンテキストの変数オブジェクトに変数を登録します.この変数オブジェクトはscope参照のオブジェクトになります.
    2.初期化手順:メモリに変数オブジェクトが登録されている変数の空き容量があることを確認します.このフェーズでは、変数はデフォルトで未定義の値を初期値に初期化します.
    3.割当て手順:未定義の初期化変数に実績値を割り当てます.
    ( https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/ )
  • varキーワードでは、宣言フェーズと初期化フェーズが同時に発生するため、定義されていない値が割り当てられます.
  • console.log(Var) // undefined
    var Var = "var";
  • letキーワードとconstキーワードは、宣言フェーズと初期化フェーズで別々に行われます.まず宣言ステップを実行しますが、変数宣言に直接到達したときに初期化ステップを実行します.したがって,変数が宣言されていても,宣言点に到達するまで変数を参照することはできず,エラーが発生する現象を「一時的死角領域(Temporal Dead Zone:TDZ)」と呼ぶ.
  • console.log(Let) // ReferenceError: Let is not defined
    let Let = "let";
    
    console.log(Const) // ReferenceError: Const is not defined
    const Const = "const";

    関数の加速

    console.log(함수선언문) // ƒ 함수선언문()
    console.log(함수표현식) // undefined
    
    console.log(함수선언문()) // '함수 선언문'
    console.log(함수표현식()) // TypeError: 함수표현식 is not a function
    
    
    function 함수선언문(){
      return '함수 선언문'
    }
    
    var 함수표현식 = function(){
      return '함수 표현식'
    }
    
    console.log(함수선언문()) // '함수 선언문'
    console.log(함수표현식()) // '함수 표현식'
    上記の例では、関数宣言(function生成関数を使用)によって生成された関数は、実行時に関数オブジェクトが作成されているため、文の位置を宣言する前に関数を呼び出すことができ、関数式(変数生成関数を使用)によって生成された関数はvarキーの結果と同じように変数自体のみ計算されます.