單線程（single threaded）

要知道Javascript是如何運作的?
想知道這個問題的話，首先我們要先了解 Javascript 是一個單線程（single threaded）的程式語言，而所謂的單線程代表程式一次只能作一件事情。再來我們從Event Loop中看一下Javasctipt處理事情的方式。

堆疊（stack）

搭配下面的圖，我們可以看到在Javascript中的執行順序

1. 首先進入 stack 的會是這個檔案中全域環境的程式（這裡稱作 main）
2.  printSquare 會被呼叫（invoke）因此進入堆疊（stack）的最上方
3. printSquare 中呼叫 square() 因此 square() 會進入堆疊（stack）的最上方
4. square 中呼叫了 multiply()，因此 multiply 進入堆疊的最上方。

• stack 有限制大小, 如果無窮呼叫就會不斷疊加直到瀏覽器錯誤

function foo() {
  return foo();
}

foo();

Concurrency(同時) and Event Loop

Javascript之所以能夠快速處理許多事情，是因為用了非同步處理的方式，這邊先以 setTimeout 來模擬非同步請求的進行，以下面的程式碼為例：

• 當我們在堆疊中執行 setTimeout 這個 function 時， setTimeout 中的 callback function（簡稱 cb）會被放到 WebAPIs 中，這時候，setTimeout 這個 function 就已經執行結束，並從堆疊中脫離。
  (setTimeout 實際上是一個瀏覽器提供的 API ，而不是 JS 引擎本身的功能；是瀏覽器提供一個計時器給JS使用)

console.log('Hi');

setTimeout(function () {
  console.log('there');
}, 5000);
// 這邊代表要在五秒後執行 console.log("there")

console.log('JSConfEU');

1. 執行main()
   

2. 執行console.log("Hi")
   

3. 執行setTimeout cb
   

4. 在webapi 等待時間倒數
   

5. 時間倒數完後放入工作佇列
   

6. 將callback function 執行
   

如果使用 setTimeout 在 0 秒後馬上執行是什麼意思呢？

• 即使我們使用 0 秒，它一樣會先將 cb 放到 WebAPIs 的計時器中，當時間到時，把該 cb 放到工作佇列（task queue）內，「等到」所有堆疊的內容都被清空後才會「立即」執行這個 cb。
  ⇒ 會依序 console 出來的內容是 hi --> JSConfEU --> there ， there 會是最後才輸入的。

文章參考來源:

1. https://pjchender.dev/javascript/js-event-loop-stack-queue/
2. https://www.youtube.com/watch?v=8aGhZQkoFbQ&list=WL&index=43&t=32s&ab_channel=JSConf