Javascript初學筆記16 什麼是IIFE?立即觸發函式(IIFE,Immediately Invoked Function Expression)

IIFE聽起來很潮很炫很難懂，不過就像大多數程式語言的名詞一樣，我們習慣把很簡單的概念用很華麗的名稱包裝起來，IIFE也完全不例外。那到底什麼是IIFE?

就字面上的意思就是宣告函式後立即使用，而且在此程式中僅使用這一次，沒錯!就跟python的lambda概念一模一樣! 我們一步一步照流程跑，很快地就能了解怎麼寫出IIFE。

最原始的函數寫法

 function additems(){
  let a = 10
  let b = 20
  return a + b 
}
additems() // 30

改為IIFE

 (function additems(){
  let a = 10
  let b = 20
  return a + b 
})  //[Function: additems]

簡單說就是用一組()將你原本寫的函數包起來，但如果你在node.js上測試的話你會發現上面的程式沒有任何反應，那是因為畢竟這還是一個函數，請在最後利用()呼叫它，也就是變為以下這樣

(function additems(){
   let a = 10
   let b = 20
   return a + b 
 })()  //30

刪除掉函數名稱

由於你之後不需要再呼叫這個函數了，有沒有名字變得一點都不重要，最後我們將名字去掉!就完成常見的IIFE囉!

 (function (){
   let a = 10
   let b = 20
   return a + b 
 })()  //30 

為什麼需要IIFE?

我想這是大多像我一樣的初學者會想問的問題，明明這跟寫一個完整的函數差不了多少，我幹嘛多費這個工? 我的理解不一定完全正確，不過我先解說一下我目前看文章下來的想法，使用IIFE有以下的優勢。

• 確保該函式不會在專案的其他地方被誤用
• 確保函式內的變數不會與其他變數相互影響

我想第二點很好理解。舉例來說，我們一開始寫的函數中包含著a,b兩個變數，若你在函式外呼叫他們，無疑會回報錯誤，如此一來我們便確保了變數的安全性。
那該怎麼理解第一點呢? 我想答案已經呼之欲出了，就跟確保變數的安全性一樣，我不想讓其他程式碼有任何機會使用到該支函式，這時候IIFE就該出馬了!

在初學階段的結論很簡單，若你知道這個函式只會在這個專案中使用一次，那就放心的使用IIFE吧!

實例操作

想像一下你今天要發薪水了，你有一份員工清單以及固定的費用支出，為了計算總額你需要跑個迴圈或寫個函數，利用IIFE就可以做到! 但我必須說，這個例子舉得有點糟糕，未來在實務上用到時我會在更新IIFE的用法。

 const workers = [
  {name:'Danny',salary:45000},
  {name:'John',salary:38000},
  {name:'Sean',salary:28000},
  {name:'Coby',salary:75000}
]
let fixed_expense = 48000
let employee_salary = (()=>{
  let sum = 0
  //坦白講 這邊用reduce去寫應該會更好 下次再試試看
  for (i in workers){
    sum += workers[i].salary
  }
  return sum
})()
let total = fixed_expense + employee_salary
console.log(total) 

參考文章:
https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-stop-feeling-iffy-about-using-an-iife-7b0292aba174