何謂作用域

作用域就是變數和函數可訪問的範圍。
作用域可分為全局作用域 (Global Scope) 和函數作用域 (Local Scope) ，但在ES6之後，存在塊作用域 (Block Scope) 。
JS 的作用域採用詞法作用域 (Lexical Scope) 也就是靜態作用域。

什麼是詞法作用域 (Lexical Scope)

函數作用域是在函數定義的時候，就決定了

範例：

const color = 'red'
function f2 () {
  console.log(color)  // red or blue ?
}
function f1 () {
  const color = 'blue'
  f2()
}

答案：red
JS是採用詞法作用域，當f2函數被執行時會查找是否有color變數，如沒有就往外找color變數

全局作用域 (Global Scope)

全局作用域是在函數以外變數，表示該變數可以在任何地方訪問。
所有函數都可以訪問全局作用域內定義的變數

let global = 'G'
function globalScope () {
  return global
}

函數作用域 (Local Scope)

變數定義在函數裡面，表示函數作用域或局部作用域，只有函數內才可以訪問，外部作用域無法訪問。

let local = 'L'
function localScope () {
  // 首先會查看函數內是否有定義local變數
  // 如果發現有就會到此為止
  // 如果沒有，JS engine就會查看外面一層函數，然後是在往外一層函數，以此類推，一直到到達全局作用域
  console.log(local)
  const innerLocal = 'Inner'
}

如果JavaScript Engine檢查了所有外層函數和全局作用域，仍然找不到此變數的話，會報錯！

特別注意

全局變數很好用很方便，在任何地方都可以被訪問。
但特別小心，就是命名空間發生衝突，或者說一不小心覆蓋全局變數的值，影響其他程式運作。如果程式越寫越大，你也很難追蹤此變數的值，非常⚠️