---
# System prepended metadata

title: 全域變數、區域變數，傻傻分不清楚?
tags: [JavaScript - 學徒篇]

---

# 全域變數、區域變數，傻傻分不清楚?

### 由範例來了解何謂**區域變數**:

1. count 函式: 帶兩筆參數，其中在函式內有一個 `var total`

2. 執行函示顯示結果: 392，執行完畢之後再跑一筆 console，卻顯示:


```
function count(oneNum, twoNum) {
    var total = oneNum * twoNum;
    console.log('總價格:' + total + '元');
}

count(8, 49);
//392
console.log(total);
// 沒有此變數 
    Uncaught ReferenceError: total is not defined at
```

- 簡單來說，function 在執行的時候，會將內部的 code 全部跑一次，並且消除，那麼變數會消失也是同樣的道理。

### 全域變數的差別:

- 正常的變數執行如下:

  也很確實的會得到答案: 30

```
var total = 30;
console.log(total);
// 30 
```
- 例如，我們直接 var a = 33;

```
var a = 33;
// 在 chrome console 輸入: window
   在下列可以找到變數 a = 33 這個檔案 
a: 33
```
- 全域變數的原理，類似今天直接將此變數記錄在這個網站上，就類似一個小記憶體一般，存放在這個網頁上了

  而一般來說，需要存取的變數越多，就會導致網頁記憶體肥大 = 效能差
  故自然是不太建議放太多的**全域變數**了，比較好的做法則是使用區域變數，執行後就 delete !

### 也試試此作法:

```
var total;

function count(oneNum, twoNum) {
    total = oneNum + twoNum;
    console.log(total);
    console.log('總價格:' + total + '元');
}

count(3, 4);
console.log(total);

// 得到結果:

7
總價格:7元
7
```

- 先在外部宣告 total 變數;
  藉由函式執行的當下，將值賦予給變數 total
  此時 total 已經被記錄: 7，故在執行過後也不會被消除
  而是續存在網頁上。


### 也試試此作法 - 2 看看結果是如何?

- 一樣，在外部宣告變數 total 空值，而此時函式內在一次宣告變數 total 那究竟會發生什麼事?

```
var total;

function count(oneNum, twoNum) {
    var total = oneNum + twoNum;
    console.log('總價格:' + total + '元');
}

count(3, 4);
console.log(total);

// 得到結果:
   總價格:7元
   undefined
```

- 原因是為什麼? 在函式執行過後 var total: 7 被消除了
  第一段可得到:7元沒問題，但因為變數還存在於全域變數，只不過已變成了空值。

###### tags: `JavaScript - 學徒篇`