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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s