ZWH ZONE

[JavaScript ES6] 宣告變數 let 與 const

zhiwei. huang -

JavaScript 的 ES6 中，多了兩種宣告變數的方法， let 與 const ， 這兩種宣告的方式出現，使 JavaScript 在編碼上更加的嚴謹，但相對的 提高了不少的 可讀性 ，給 降低 了許多 維護成本 ， 下面說明會那原有的 var 宣告方式進行比較：

const 的宣告方式，比較容易理解，先從 const 進行說明：

const :

const 是在 ES6 中，專門為 常數 提供的宣告方式，如下：

const x = 10；

但要特別說明的是: 使用 const 宣告 常數 時，一定要賦予值，如果沒有 賦予值，是會 SyntaxError 的錯誤的，如下：

const x; //SyntaxError

另外使用 const 宣告 常數 之後，被宣告的 常數 是 無法覆寫或更新的 ， 如下：

const x =10;
x = 20; //SyntaxError

let:

let 的宣告方式，與我們平常使用的 var 很相近，這兩者的差異在於 作用域(scope)，下面以實例說明：

關於 var 的 作用域(scope)，可以查看 [JavaScript] 宣告變數 與 作用域，進一步理解

這邊我們先用 var 的方式進行宣告 i :

範例編碼：

function test(){
 for(var i = 0; i < 3; i++){
   console.log(i,'for loop scope')
 }
 console.log(i,'test function scop')
}
test();

結果如下：

0 "for loop scope"
1 "for loop scope"
2 "for loop scope"
3 "test function scop" //注意這行

接著我們先用 let 的方式進行宣告 i :

範例編碼：

function test(){
 for(let i = 0; i < 3; i++){
   console.log(i,'for loop scope')
 }
 console.log(i,'test function scop')
}
test();

結果如下：

0 "for loop scope"
1 "for loop scope"
2 "for loop scope"
"Uncaught ReferenceError: i is not defined" //注意這行

以上上面的實例來看，我們可以得知 var 與 let 兩者的作用域差異：

var 的 作用域(scope) 以 function 為一個臨界點，在 function 內都可以提取到 i 的值

let 的 作用域(scope) 以 程式區塊（大刮號） 為一個臨界點，在 程式區塊（大刮號) 內都可以提取到 i 的值

Facebook 功能：