# What is event loop? What is the difference between call stack and task queue? [SOL]
> The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.


**Runtime**: 執行環境 (例如：瀏覽器、Node.js)

[Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) ([BOM APIs](https://medium.com/@antwan29/browser-and-web-apis-d48c3fd8739#:~:text=So%2C%20a%20Web%20API%2C%20in,solve%20our%20front%2Dend%20problems.)): 瀏覽器提供APIs,我們使用JavaScript這個語言與它溝通 (DOM、EventTarget、Fetch API...)

**CallBack Queue**: 工作佇列,接收從Web APIs傳來等候被執行的任務，以先進先出的方式，透過 Event Loop 的監控，當執行堆疊（call stack)裡清空時，才傳入佇列內容中依先進先出排序的任務。

**Heap**: unstructured memory pool非結構化內存池, 存放各種objects.

**Call Stack :** 程式執行的地方，單執行緒。execution context的堆疊。

當開始執行程式，會從全域的主程式開始，逐一把各個函式推進執行堆疊的最上方，並由最上層（也就是最後進入的）開始執行，而當該函式結束後（return），會將此函式抽離堆疊（pop off）。

**Event Loop事件循環**: 就是一個瀏覽器上協調各種事件的機制。
當Stack清空時，Event Loop會把CallBack Queue放到Stack裡，從最舊的開始。Event Loop是讓JS能有非同步行為必要的部分！JavaScript 的並行模型（concurrency model）是基於「事件循環（event loop

**並行模型（concurrency model)**: 一個語言可以同時運作多個工作。
:::warning
Event Loop是任務分配員,call stack任務執行的地方,CallBack Queue是接收從Web APIs傳來等候被執行的任務
:::

### 補充

https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html

待補充：
#### global ec 會不會消失，還是執行過就存留。?
global ec當成是執行到最後一行就消失，但會被記錄在Environment records
#### call stack 為什麼可以使用 web api的方法?
沒錯，引擎可以去呼叫那個由windows提供的function呼叫，但他發現不是他js引擎做的事情就給webaPI處理。
BOM補充


:::warning
The Global Environment

The global environment is a unique Lexical Environment which is created before any ECMAScript code is executed. The global environment’s Environment Record is an object environment record whose binding object is the global object (15.1). The global environment’s outer environment reference is null.

As ECMAScript code is executed, additional properties may be added to the global object and the initial properties may be modified.
:::

# BOM補充


### BOM (Browser Object Model，瀏覽器物件模型)，是瀏覽器所有功能的核心，與網頁的內容無關。

BOM，是 JavaScript 與瀏覽器溝通的橋樑，JavaScript 可以透過 BOM 對瀏覽器進行各種操作，包含開啟及關閉視窗、改變視窗大小、計時器、取得位址之類的。其實就是 window 物件。而 window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。

Web APIs vs BOM ?
基本上，Web API 是瀏覽器提供給我們前端開發人員的 API。 它們也可以稱為 BOM APIs。
### Window 物件
瀏覽器物件模型有著階層性的架構，最上層便是 window 物件，代表著瀏覽器視窗本身。
所有的BOM都可透過window來存取。window物件的使用不須經過宣告，可以直接使用。事實上，在Javcascript中，所有的全域變數、函式、物件，其實都是屬於window物件。
[2014 javascript](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html)

[loupe](http://latentflip.com/loupe/?code=CmNvbnNvbGUubG9nKCJIaSEiKTsKCnNldFRpbWVvdXQoZnVuY3Rpb24gdGltZW91dCgpIHsKICAgIGNvbnNvbGUubG9nKCJDbGljayB0aGUgYnV0dG9uISIpOwp9LCA1MDAwKTsKCmNvbnNvbGUubG9nKCJXZWxjb21lIHRvIGxvdXBlLiIpOw%3D%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)

[Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)

[ECMAScript® 2022 Language Specification](https://tc39.es/ecma262/#sec-global-environment-records)

[A detailed look at global variables * Deep JavaScript](https://exploringjs.com/deep-js/ch_global-scope.html)

[The ECMAScript "Executable Code and Execution Contexts" chapter explained](https://medium.com/@g.smellyshovel/the-ecmascript-executable-code-and-execution-contexts-chapter-explained-fa6e098e230f#39c7)

[Is the initial global execution context ever popped off the call stack in JavaScript?](https://stackoverflow.com/questions/29879525/is-the-initial-global-execution-context-ever-popped-off-the-call-stack-in-javasc)

[Is it possible for Global Execution Context to pop off the execution stack?](https://stackoverflow.com/questions/33869145/is-it-possible-for-global-execution-context-to-pop-off-the-execution-stack)