- Stack: Function calls form a stack of frames (records the state of where we are in the program) - When a function is called/invoked/executed, a new local execution context (scope) is created containing it’s arguments and local variables. - The new local execution context also contains also contains a reference to the outer scope (scope chain)
- The new local execution context also contains a ‘this‘ object is created (pointing to the object that invoked the function)
- When another function is called/invoked/executed, a second local execution context (scope) is created and pushed on top of the first execution context. - The new local execution context also contains it’s own arguments and local variables, etc etc.
- When the second function returns, the top execution context is popped off the stack.
- When the first function returns, the stack is empty.
- Heap: Objects are allocated in a heap (a large mostly unstructured region of memory).
- Calling the associated function creates an initial stack.
- The message processing ends when the stack becomes empty again.
- Event Loop:- Has one job – look at the stack and task queue.
- If the stack is empty, it takes the first task on the queue and pushes it onto the stack.
DOM events (click, etc) or callbacks are pushed to queue
Interesting Points (from the video):
- setTimeout is not a guaranteed time to execution, it’s the ‘minimum’ time to execution. - Due to the fact that setTimeout tasks are lined up in the event queue. See 18:11 marker in video.