Global Variables

JavaScript的function可以存取function內部的變數，
也可以存取function外的變數。

var x = 1;
function foo() {
  var y = 2;
  return x + y + 1;
}
foo(); \\ 4

上面的例子中，
x是global variable，屬於window object，
在整個html page或是window中可以被使用、修改。
y是local variable，
只能在被定義的function中使用。

Life time

Global variable會活得跟window、web page一樣長，
Local variable生命週期很短，function被invoke時會被created，function結束後就被delete。

Counter dilemma

如果要使用counter來計算某些東西，並且讓所有function來使用這個counter，就使用global variable吧！

var count = 0;

function add(x) {
  return count += x;  
}

add(1); // 1
add(2); // 3
add(3); // 6
count = 4 // 這是一段任何的code
console.log(count); // 4

任何的code不用透過invoke add()都能夠改變count，
為了不要讓其他code去改變count，
如果我們把count作為add()的local variable，
來防止add()之外的code來修改count。

function add(x) {
  var count = 0;
  count += x;  
  return count;
}

add(1); // 1
add(2); // 2
add(3); // 3

預設應該是要等於6，
但是每次執行add()時，counter都會被reset一次變為0。

Nested Functions

Function 除了可以使用global variable之外，
由於JavaScript支援 nested(嵌套) function，
Function也能夠從上一層的scope尋找變數並使用。

function add(x) {
  var count = 0;
  function plus() {
   count += x;   
  };  
  return count;
}

如果能從外面直接invokeplus()，就可以解決這個問題了。
但是還是得解決count = 0的問題，希望他能只被執行一次就好。

Closure

可以使用閉包 (closure)來解決這個問題

var add = (function() {
  var count = 0;
  return function() {
    count += 1;
    return count;
  };
})();

add(); // 1
add(); // 2
add(); // 3 

變數add 被assign一個self-invoking function，
self-invoking function只會執行一次，
並將count設為0，return一個 function expression，
這樣使得add變為function，
也能夠在前一層scope取得count。

資料來源：W3school