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

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

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 - 學徒篇`