Let And Const

以下會比較ES6後出現的 Let and Const

  • In ES5 Only var

  • In ES6:letconstvar

參考資料:

Basic:

  • let:用來宣告變數,所宣告的變數只在let命令所在的程式碼區塊內有效。

  • const:用來宣告常數,所謂常數就是不可以更改的變數。

  • letconst:具有區塊作用域(Block Scope)。

  • var:函式作用域。以function為界,在外讀不到。但若像 if / else / for / while,宣告的 var 仍可在整段程式碼做存取。

Let:

  1. let 宣告的變數只在宣告時所在的程式碼區塊內有效。

  • 每次執行函式時,就會建立區域變數,結束後再摧毀

{
let a=10;
}
  1. 有變數提升現象,但因暫時性死區會變成ReferenceError。(變數提升:Hoisting)。 這邊要特別提出一個參考資料:let聲明會提升嗎?

    //var 情況
    console.log(foo); //Undefined
    var foo=2;
    
    //let 情況
    console.log(bar); //ReferenceError
    let bar=2;
  2. 暫時性死區(TDZ):在程式區塊內,使用let命令宣告變數之前,該變數都不可使用。

    {
    tmp='abc'; //ReferenceError
    console.log(tmp); //ReferenceError
    
    let tmp; //暫時性死區結束。
    console.log(tmp); //Undefined
    }
  3. let 不允許在同一個作用域內重複宣告變數。

    //報錯
    function fun(){
    let a=10;
    let a=1;
    }
  4. for迴圈的時候

    for(let i=0;i<10;i++){
     //.....
    }
    console.log(i);
    // ReferenceError:i is not defined
    for(let i=0;i<3;i++){
     let i='abc';
     console.log(i);
    }
    // abc
    // abc
    // abc
    // ()小括號內的是父作用域
    // {}大括號內的是子作用域

Const:

  1. const 宣告一個只讀的常量,一經宣告,無法再改變。

    const PI =3.1415;
     PI=3;//Error
  2. 一但宣告變數,·必須立刻初始化(賦值),只宣告不賦值,報錯。

    const foo;
    //SyntaxError: Missing initializer in const declaration
  3. 一樣只在作用域內有效(請參考let的第一點)。

  4. const 保證的是變數指向的那個記憶體位址不得改變

    const foo = {};
    foo.prop =123; //ok
    foo = {}; //TypeError:'foo' is read-only
    • 對於數值、字串、布林,值是儲存於變數指向的那個記憶體位址。

    • 對於複合型別的資料(物件、陣列),變數指向的記憶體位址,是一個指向實際資料的指標,const 只能保證這個指標是固定的(即總是指向一個固定的位址),至於其指向的資料結構是否可變,就無法控制。

Classic Test:

for (let i = 0; i < 10; i++) {
  console.log(i);
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 0);
}

for (var i = 0; i < 10; i++) {
  console.log(i);
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 0);
}

Coding Style

不要再使用var 宣告變數,改用 letconst,而且優先使用const,除非需要指定值才用 let

減少使用逗號來宣告多個變數。eg. let a=1,b=2;

於合理位置,放置變數宣告。(通常我都會集中在最上面)

Null vs Undefined

  • undefined:代表此變數還沒有給值,所以不知道是啥

  • Null:代表此變數可能曾經有值,但現在沒有值

Last updated