Anonymous function expression

雖然匿名函式很好用,但有時在許多callback時會造成難以閱讀

setTimeout(function(){
    console.log("hello world")
}, 3000);

function expression

具名函式有名稱會比較好閱讀,雖說匿名與具名沒有差別,但對於readability很有幫助

setTimeout(function Hello(){
    console.log("hello world")
}, 3000);

Arrow Function

箭頭函式提供更簡潔的寫法,但要注意Arrow function會指定this

a = 1
const func = () =>{
    console.log(this.a) //undefined
}
func()

function hello(){
    console.log(this.a) //1 RHS全域的a
}
hello()

IIFE(Imadiately invoked function expression)

• function Scope不會被全域變數汙染.
• 立即執行
• 不用使用function Statement

先來看沒有使用IIFE的fucntion,下列function不是function statement所以無法執行,語法上就錯了不能使用匿名函式

function(a){
    console.log("Start")
    for(let i = 0; i < a ; i++){
        console.log(i)
    }
    console.log("end-for")
}

這邊直接使用括弧包起來,要傳參數即在最後(parameter)即可

(function(a){
    console.log("Start")
    for(let i = 0; i < a ; i++){
        console.log(i)
    }
    console.log("end-for")
})(5) //Start 1,2,3,4,5 end-for

避免被汙染

var name = "Dennis";
(function(){
    var name = "Jessica";
    console.log(name); //Jessica
})()

console.log(name); //Dennis