var、let、const

# var、let、const ###### tags: `JavaScript` `JS 直播班 - 2021 秋季班` ## 1.var、let、const 的差異？ ### **傳統變數var** #### A.var特性: 1. function內宣告的 var，要在該function才有作用，但是如果在函式外宣告的話，其作用範圍則為全域性(global)。 2. 可重複使用 var 宣告變數，但不會覆蓋原有的指定值 3. 假如沒有賦予值，初始值undefined #### B.var的缺點 ##### 1.允許重新宣告 (Re-Declaring) ```=JavaScript console.log(a); //a is no defined var a; console.log(a); //undefined a=10; console.log(a); // a=10 var a; console.log(a); // a=10 ``` **即使在同一個作用域，同樣名稱的變數也允許重複宣告，宣告一個變數還不會重置該變數的值** 上方的程式碼可以看到用var宣告了一個變數a，但a還是可以重新宣告，況且值還會相同 ##### 2.不支援區塊作用域 (Block Scope) **什麼是 Block Scope?** 簡單來說就是函數或是if、for等語法的大括號{}範圍而var宣告的變數不會受到大括號範圍作用域受限，容易造成變數管理或是使用函數上面的不方便 ##### 3.不支援常數 (Constant) 特性 #### C.宣告var變數跟無宣告var變數的差別 ``` =JavaScript function func() { x = 10; var y = 20; } func(); console.log(x); console.log(y); ``` x 在function中未使用 var 宣告，是全域變數上的特性，在函式外依舊可見 y 使用了 var 宣告，所以在函式外不可見，為函式中的區域變數。如果在全域使用 var 宣告變數，也相當於在全域物件上建立特性 **如果全域與區域中有同名的變數，則區域會暫時覆蓋全域** ### **let** #### A.let特性: 1. 禁止在同一層Block重複宣告變數 2. 宣告在不同的Block不會互相衝突 ### **const** #### A.const特性: 1. 宣告 const 時就必定要指定給值 2. 無法再度使用 let或 var 重新宣告變數 3. 一旦給值後，就無法重新賦值 ## 2. by reference 、 by value ### **by value** ```=javaScript let a =5; let b; b=a; a=2; console.log(a); // a=2; console.log(b); // b=5; ``` 示意圖: ![](https://i.imgur.com/ZzXfE3M.png) b=a; :: 給予b跟a相同值的時候，b會再建立一個新的記憶體空間並複製一份a的值放進去 a=2; :: 再賦予a的值給b後，即使在改變a的值，b的值也不會在跟著改變 **a 和 b 其實是存在於兩個不同的記憶體位置，因此彼此並不會乎相干擾影響** **JavaScript5中primitive type（Boolean, String, Number, null, undefined）都屬於 By Value。** ### **by reference** ```=JavaScript let c={ name:"danny" }; let b=c.name; c.name="john"; console.log(c.name); //john console.log(b); //john ``` 示意圖: ![](https://i.imgur.com/h1GyH50.png) b=c.name; :: 賦予c.name的值給b c.name="john" :: 將c.name的值改變變數b的值等同於c時，這時候並不會再給它一個新的位置，而是一樣指定到物件c的位置（即0x002）實際上是不會有新的東西被建立，**變數c和b都會被指稱到相同的位置（即0x001）** 當c的值改變的時候b的值也會改變，因為它們實際上是指稱到相同的位置 ## 3.undefined 與 null 的差異 ### **undefined** 1. typeof undefined會回傳undefined 2. 若變數沒有提供初始值，則預設為undefined值 3. 當要取用一個物件的屬性或陣列的元素時，若該屬性/元素不存在，回傳undefined 4. 若原本一個函數需要傳入參數，但是調用函數時卻沒有傳入參數，則回傳值將會是undefined ### **null** 1. typeof null會回傳object 2. 在做DOM元素操作時，若要獲取的DOM元素不存在，則會回傳null 3. null是用來給開發者來宣告”空值”的 ### **null跟undefined的相似處** 1. 都没有attribute和method，也不能額外添加attribute跟method 2. 皆為Falsy Value(Boolean判斷時為false) 3. 皆為Primitive Type P.S. null == undefined 回傳true null === undefined 回傳false 參考資料: [JavaScript: var, let, const 差異](https://totoroliu.medium.com/javascript-var-let-const-%E5%B7%AE%E7%95%B0-e3d930521230) [[JS學徒特訓班] JavaScript ES6 : var, let, const 差異](https://codinggirl.timelog.to/a174653905) [你不可不知的 JavaScript 二三事#Day7：傳統 var 關鍵字的不足](https://ithelp.ithome.com.tw/articles/10203548) [[筆記] 談談 JavaScript 中 by reference 和 by value 的重要觀念](https://pjchender.blogspot.com/2016/03/javascriptby-referenceby-value.html) [Javascript中undefined和null的差異](https://snh90100.medium.com/javascript%E4%B8%ADundefined%E5%92%8Cnull%E7%9A%84%E5%B7%AE%E5%88%A5-1f48e9be5e02)