搞懂function statements 和 function expressions的差別,讓自己寫程式的時候不會搞混

我在學習JavaScript的過程中,有曾經一度感到超級混亂,因為同一種方式有好多不同種的寫法,如果當下沒有說明或看仔細,會發現當要自己動手寫的時候,怎麼好像是這樣寫,但印象中卻又是另一種寫法

而其中一個搞混的部分就是function的寫法,function有分為function declaration跟function expression,現在先來了解這差別在哪

表達式(expression)

什麼是表達式,簡單來說輸入程式後,會回傳一個值就是expression

EX

陳述式(declaration)

也稱為Statements,這種程式不會回傳值,也不能將他命名變數

EX

if( zz===3 ){
    console.log('123')
}

而這當中zz===3這會回傳值true跟false,所以這裡面的內容為表達式

Function

這個function在JavaScript當中被認定為物件,我們可以用Expression 或 Statements 來控制他

Function Expression跟Function Statements 就結果而言,並沒有什麼不同,先看一個簡單例子

EX

const a = 1
const b = 2
//function Expression

const expressionEX = function (a, b) {
console.log('Expression的內容')

    console.log(a + b)
    console.log('text 123')
}
expressionEX(a, b)
//function Declaration

function declarationEX(a, b) {
     console.log('Declaration的內容')

     console.log(a + b)
     console.log('text 123')
}
declarationEX(a, b)

可以看到這個結果都是一樣的

Function Expression

函式表達式,寫法是宣告一個變數,將function存取起來,而這個function可以命名也可以不命名

const expressionEX = function  命名() {
}

Function declaration

函式陳述式,寫法是把function寫在前,並須幫你得函式命名

function declarationEX() {
}

到底差在哪裡?

差在Hoisting的差別,這裡不清楚Hoisting的話可以看我這篇

什麼是Hoisting,你可能沒注意到的變數、函式宣告規則,了解宣告bug的不同

那簡單來說function declaration在程式執行前就會把整個函式都存進記憶體,所以可以這樣使用

declarationEX()

function declarationEX(a, b) {
   	console.log('Declaration的內容') //Declaration的內容
}

依然可以執行成功

但Function Expression就不能這樣,根據規則,他只有變數會被存取,而賦值並不會

console.log(expressionEX)
expressionEX()
var expressionEX = function () {
     console.log('Expression的內容')
}

這裡我故意多一行顯示expressionEX出現undefined,而要用呼叫函式卻不行,因為變數被放置記憶體,但函式內容(賦值)並沒有

結論

這裡其實懂得Hoisting的理論,很快就能理解兩者的差別,但實務上為了更好閱讀程式碼,通常會宣告後,在使用,所以兩者看起來並沒有差別太大,而Function Expression在EX6之後可以用箭頭函式被取代,那段也是讓我搞混的其中之一,不過用久了之後就會知道該怎麼寫

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *