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)