Function Declaration 與 Function Expression 的差異

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

Version

ECMAScript 5

ECMAScript 2015

Function Declaration

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

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

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

Function Expression

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

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

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

Why ?

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

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

Conclusion

• Function Declaration 看似與 Function Expression 一樣，都是定義 function，但卻有 Hoisting 的差異