### 🔍小範例大學問👊
# [<font color="#f00">JavaScript</font>] var、let、const 異同總整理
---
## 1. 有無初始值：

var a;
//undefined

let b;
//undefined;

const c;
//Uncaught SyntaxError: Missing initializer in const declaration.
//說明：缺少初始值設定。

## 2. 重複宣告同一變數：

var a = 1;
var a = 2;
//2

let b = 1;
let b = 2;
//Uncaught SyntaxError: Identifier 'b' has already been declared.
//說明：變數b已被宣告。

const c = 1;
const c = 2;
//Uncaught SyntaxError: Identifier 'c' has already been declared.
//說明：變數c已被宣告。

## 3. 重新賦予新值：

var a = 1;
a = 2;
//2

let b = 1
b = 2;
//2

const c = 1;
c = 2;
//Uncaught TypeError: Assignment to constant variable.
//被宣告後，則其所分配的值無法再被更改。

## 4. Hoisting ( 提升 )：
💬說明：在執行任何程式碼前，JavaScript 會把{"var"和"函式"宣告}先放進記憶體裡面，這樣做的優點是：可以在程式碼宣告之前使用它。

console.log(a);
var a = 1;
//undefined
//說明：變數a已被放入記憶體，但值不會被放入。程式碼可改寫為如下
var a
console.log(a);
a = 1;

console.log(b);
let b = 1;
//Uncaught ReferenceError: Cannot access 'b' before initialization.

console.log(c);
const c = 1;
//Uncaught ReferenceError: Cannot access 'c' before initialization.

## 💡 全域變數 (global variable)和區域變數 (local variable)：

 let a  = 1;

 function ya(){
     let b = 2;
     console.log(b);
 }

console.log(a);
ya();
//1
//2
//a為全域變數、b為區域變數

## 5. 區域變數的可見度(function)：

function ya(){
    var a  = 1;
 }
 console.log(a);
//Uncaught ReferenceError: a is not defined.
//變數未被宣告

💬說明：不管是var、let還是const，在函式(function)內所宣告的變數就只能在函式內，無法及於全域。

## 6. 迴圈內變數的可見度(if、loop)：

if (true){
    var a = 1;
}
console.log(a);
//1

if (true){
    let b = 1;
}
console.log(b);
//Uncaught ReferenceError: a is not defined.
//變數未被宣告

if (true){
    const c = 1;
}
console.log(c);
//Uncaught ReferenceError: a is not defined.
//變數未被宣告

💬說明：只有var會讓迴圈內的變數影響全域。

## <font color="#f00">📌總整理</font>

| | var| let| const |
| ---------------------| -- | -- | ----- |
| 初始值 | ✔️ | ✔️ | ❌ |
| 重複宣告 |✔️ | ❌ | ❌ |
| 賦予新值 | ✔️| ✔️ | ❌ |
| 程式碼執行前已先拉至記憶體|✔️ | ❌ | ❌ |
| 函式內宣告變數影響全域 |❌ | ❌ | ❌ |
| 迴圈內宣告變數影響全域 | ✔️| ❌ |❌ |

---
#### 參考文章
* [let 和 var 在 for迴圈中的結果差異](https://medium.com/randy-chen/let-%E5%92%8C-var-%E5%9C%A8-for%E8%BF%B4%E5%9C%88%E4%B8%AD%E7%9A%84%E7%B5%90%E6%9E%9C%E5%B7%AE%E7%95%B0-54f61cdb5f48)
* [[JS學徒特訓班] JavaScript ES6 : var, let, const 差異](https://codinggirl.timelog.to/a174653905)
* [在 JavaScript 中，Var、Let、Const 的差異？](https://askie.today/differences-among-var-let-const/)