200213-詳解let、const、var的差異 (JS ES6)

參考網站:

1. 彭彭課程-詳解let、const、var的差異 (Youtube會員) 2. [ES6-重點紀錄] 宣告方式 let、const 3. 變數與常數 4. [筆記] JavaScript ES6 中使用 const 宣告常數

var

使用var宣告變數，變數的scope(範圍)以函式區塊分界。
程式片段一:

for(var i=0;i<3;i++){        
    console.log(i)          
}        
console.log(i)  //印出3

雖然i宣告在for迴圈內，但for為判斷式，此程式片段都還是屬於在同一範圍，所以可以叫出i。

程式片段二:

function test(){
    for(var i=0;i<3;i++){        
    console.log(i)          
   }        
}
console.log(i)  //錯誤，找不到變數i

此程式片段有函式，函式內為一個scope，函式外為另一個scope，i宣告在函式內，所以函式外的
i找不到變數。

---

let

使用let宣告變數，分界較嚴格，變數的scope以程式區塊(大括號)分界
程式片段一:

for(let i=0;i<3;i++){        
    console.log(i)          
}        
console.log(i)  //錯誤 找不到變數i

程式片段二:

function test(){
    for(let i=0;i<3;i++){        
    console.log(i)          
   }        
}
console.log(i)  //錯誤，找不到變數i

使用let宣告變數，不僅函式會產生區隔，連判斷式(ex:for…)也會產生新的scope

---

const

使用const宣告常數，常數的資料不能變動
例如:

var v=3;
v="Hello World";  //變數中的資料可變動

let l;    //宣告變數可以暫時不給資料
l=0;      //變數中的資料可變動

const x;  //錯誤，常數宣告時一定要給資料

const c=100;  //正確，宣告常數，同時給定資料
c=50;     //錯誤，不能更動常數中的資料

使用 const 在宣告陣列或物件時需要留意的地方

1.當用const宣告常數，並用push推入一個陣列的值時，並不會有錯誤的情形。

const arr= ["Hello", "h1144777"]
console.log(arr);  // ["Hello", "h1144777"]

arr.push("welcome")
console.log(arr);// ["Hello", "h1144777", "welcome"]

因為在JS中陣列(array)和物件(object)皆屬於 “參考型別(reference type)” <=待學習,
仍然指稱到的是同一個記憶體位置，同樣道理，如果使用的是物件(object)，一樣不會有錯誤
的情形產生。

2.如果使用object literal( 大括號{} )的方式修改物件內容，對於JS引擎來說等於建立新物
件，也就是他會將這個物件存到另一個記憶體位置，就是這個常數的值改變了，就會出現錯誤訊息

物件部分:

const obj = {
    name: "h1144777"
}
console.log(obj);  // {name:h1144777}

obj = {
    name: "abcd"
}
console.log(obj);  //錯誤

陣列部分:

const arr = [23, 24, 25];
console.log(arr);  //[23, 24, 25]

arr = [34, 35, 36];
console.log(arr);  //錯誤

延伸觀念

1.什麼是function scope
function scope指的是函式範圍，用var宣告變數後，被宣告的這個變數在此函式範圍內都有效，變數有效
範圍越大越難管控變數，也越有可能造成Bug

2.什麼是block scope
block scope為區塊範圍，使用let宣告變數或是用const宣告常數，被宣告的變數或常數僅在區塊範圍內有效，也就是僅在限定的{ }內有效。