---
# System prepended metadata

title: '[JavaScript] var、let、const的差別'
tags: [JavaScript]

---

# [JavaScript] var、let、const的差別
###### tags: `JavaScript`

## **let**

- 賦值後可以修改內容的變數
- 大部份的情況等同於 `var`

## **const**

賦值後就無法在修改內容變數 = 常數

- 基礎型別

    ```javascript
    const a = 10;
    a = 11 // (x)

    ```

- 參考型別

    ```javascript
    // 物件
    const b = { num : 123 };
    b = {num: 456}; // (x)
    b.num = 789; // (v)

    // 陣列
    const c = [1, 2];
    c = [3, 4]; // (x)
    c.push(9); // (v)

    ```

## **var 與 let / const 比較**

1. 無法重複宣告
    ```javascript
    var y = 40;
    var y = 50; // (v)

    let x = 10;
    let x = 20; // (x)
    r2rf
    ```

2. 只作用在當前區塊的變數
    
    **區塊定義**
    ```javascript
    {
        // 區塊
    }
    ```
    - 函數區塊
    ```javascript
    function fn() {
         var a = 10;
         let b = 20;
         const c = 30;
    }
    console.log(a); // (x)
    console.log(b); // (x)
    console.log(c); // (x)
    ```
    - if 區塊
    ```javascript
    if(true){
         var a = 10;
         let b = 20;
         const c = 30;
    }
    console.log(a); // (v)
    console.log(b); // (x)
    console.log(c); // (x)
    ```
    - for loop 區塊
    ```javascript
    for(var a = 0; a < 5; a++){
        // do sth ...
    }
    console.log(a); // (v)
    ```
    ```javascript
    for(let b = 0; b < 5; b++){
        // do sth ...
    }
    console.log(b); // (x)
    ```
    - for…of 區塊
    ```javascript
    for(var a of [1, 3]){
        // do sth ...
    }
    console.log(a); // (v)
    ```
    ```javascript
    for(const b of [1, 3]){
        // do sth ...
    }
    console.log(b); // (x)
    ```
        