【前端筆記】【面試題】面試檢討-2

這段程式碼的結果是什麼，會有什麼問題

duckA();
duckB();
duckC();

function duckA() {
  console.log("hello, i am a duckA!");
}

var duckB = () => {
  console.log("hello, i am a duckB!");
}

const duckC = () => {
  console.log("hello, i am a duckC!");
}

====== 解答防雷線 ======

因為 duckA 是使用 function 宣告，所以會在程式執行前被提升（Hoisting）至最上層。這樣即使 duckA() 被呼叫的位置在函式宣告之前，仍然可以正確執行，並印出： hello, i am a duckA!

duckB 是使用 var 宣告的函式（用箭頭函式形式表示），在 Hoisting 時，只會將變數名稱 duckB 提升，但不會提升其賦值（即函式本身）。因此在 duckB() 被呼叫時，duckB 的值還是 undefined，這樣去呼叫 duckB() 時就會發生錯誤，並出現錯誤訊息：TypeError: duckB is not a function

duckC 是用 const 宣告的函式（用箭頭函式形式表示），而 let 和 const 宣告的變數在其作用域中具有暫時性死區（Temporal Dead Zone, TDZ），直到程式碼執行到變數賦值的那一行之前，該變數無法被存取。由於在 duckC() 被呼叫時，duckC 尚未被賦值，所以會出現類似的錯誤 duckC is not defined（在這段程式碼中其實不會執行到這一步，因為程式會在 duckB() 報錯後中止）。