###### tags: `六角JS 直播班 - 2021 秋季班`
var、let、const 的差異?
===

# var
var可以重複宣告，相較於let較不嚴謹，未來若程式碼一多可能會導致程式碼難以維護。

在作用域內宣告的var，在作用域內才有作用，如果是在function外宣告的var，則會被視為全域變數。

<br>

>### var可能有的副作用

- **只存在在特定區塊中**

function func (){
    var a =1;
    console.log(a); //1

}
func()
console.log(a) //在外層抓不到在函式func內名稱為a的var變數 Uncaught ReferenceError: a is not defined

- **可以被重複宣告，也可以被重新賦予值**

#example1

var a = 1;
var a = 2;

console.log(a); //2 第一個var變數會被第二個覆蓋掉

#example2

var a = 1

function func (){
    var a = 2;
    console.log(a); //2
}
func();
console.log(a); //1
//有兩個相同名稱的var變數卻不會報錯，雖然名稱相同但被視為兩個完全不同的變數

- **循環變數洩漏為全域變數**

var i = 10

for(var i = 0; i<5; i++){
    console.log(i); //0 1 2 3 4
}

console.log(i); //應為10，卻印出5

- **離開作用域，在外層仍可取出值**

for (var i=0; i<5; i++){
console.log(i); //0 1 2 3 4
}
console.log(i); //5

# let

在ES6後取代var，為較嚴謹的宣告方式。
const 可不可以修改？
A1：基礎型別不行，但物件型別可以。

B1：const 僅限制無法修改 `value`（無法重新賦予值），但可以修改 `reference` 原物件的值。
Q2：如何讓 reference 不能被修改？
A2：使用 freeze()，防止 const 的 property 被更動。

>### let的特性
- **僅能宣告一次，且可以被重新賦予值**

let a = 1
let a =2
console.log(a) // 不能重複宣告 Uncaught SyntaxError: Identifier 'a' has already been declared

let a = 1
a=2
console.log(a) // 2 可以被重新賦予值，不需要再宣告一次

- **離開作用域，外層無法取出值**

for (let i=0; i<5; i++){
console.log(i); //0 1 2 3 4
}
console.log(i); //Uncaught ReferenceError: i is not defined

# const
同為較嚴謹的宣告方式，需初始化，不可重複宣告，用來宣告不易變動的值。
>### const的特性
- **需初始化**

const a;
a=1
console.log(a); //Uncaught SyntaxError: Missing initializer in const declaration

- **僅能宣告一次，不可被重新賦予值**

const a = 1;
const a = 2;
console.log(a); //Uncaught SyntaxError: Identifier 'a' has already been declared

const a = 1;
a = 2;
console.log(a); // Uncaught TypeError: Assignment to constant variable.

<br>

>**參考資料:**
>[JavaScript: var, let, const 差異](https://totoroliu.medium.com/javascript-var-let-const-%E5%B7%AE%E7%95%B0-e3d930521230)
>[JavaScript 那個 let, const, var 到底差在哪？](https://www.youtube.com/watch?v=FGdKdn_CnWo)