差異就在 Hoisting

Function Declaration 與 Function Expression 寫法看似相等,但 Function Declaration 會 Hoisting,而 Function Expression 不會。

Version


ECMAScript 5
ECMAScript 2015

Function Declaration


1
2
3
4
5
console.log(sum(1, 2));

function sum(x, y) {
return x + y;
}

使用 Function Declaration 定義 sum(),雖然定義在 console.log() 下方,但依然能夠執行。

function000

Function Expression


1
2
3
console.log(sum(1, 2));

const sum = (x, y) => x + y;

sum() 改用 Function Expression 方式,看起來完全一樣,但卻無法執行。

function001

Why ?


原因在於 Function Declaration 會 Hoisting,所以儘管 sum() 定義在 console.log() 之後,但執行前會先 Hoisting 到最前面,所以仍然可以正常執行。

但 Function Expression 則不會 Hoisting,所以 sum() 必須定義在 console.log() 之前才能執行。

Conclusion


  • Function Declaration 看似與 Function Expression 一樣,都是定義 function,但卻有 Hoisting 的差異
2018-11-08