我在學習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之後可以用箭頭函式被取代，那段也是讓我搞混的其中之一，不過用久了之後就會知道該怎麼寫