Execution Contexts and the Call Stack

Execution context is an environment in which a piece of JavaScript is executed. Stores all the necessary information for some code to be executed.

비유하자면 피자를 JavaScript code라고 치고

피자가 담긴 박스를 Pizza execution context인 셈

이 박스에는 포크, 소스 등 피자 먹는데 필요한 모든게 다 담겨 있음

=> execution context에는 코드를 실행하는데 필요한 모든게 담겨 있다.

 

• Exactly one global execution context (EC): Detault context, created for code that is not inside any function (top-level)
• One execution context per function: For each function call, a new execution context is created.

 

Compilation후의 EXECUTION 과정

Step 1. Creation of global execution context (for top-level code)

-> NOT inside a function

Step 2. Execution of top-level code (inside global EC)

Step 3. Execution of functions and waiting for callbacks

e.g. click event callback

 

Execution Context has three things within it —

1. Variable Environment- let, const, and var declarations, functions, and arguments object
2. Scope Chain
3. this keyword

https://javascript.plainenglish.io/execution-context-in-javascript-abe424d000b

Execution Context in JavaScript

Once the compilation of code is done, the JavaScript engine creates a Global Execution Context (GEC) for the top-level code (Code that isn’t within any function). The execution of top-level code starts within GEC, whenever a line of code calls a function, an execution code for that function gets created. There is only one Global Execution Context but each function call has its own execution context.

 

Call Stack is a place where execution contexts get stacked on top of each other, to keep track of where we are in the execution.

Execution stack, also known as “calling stack” in other programming languages, is a stack with a LIFO (Last in, First out) structure, which is used to store all the execution context created during the code execution.

When the JavaScript engine first encounters your script, it creates a global execution context and pushes it to the current execution stack. Whenever the engine finds a function invocation, it creates a new execution context for that function and pushes it to the top of the stack.

The engine executes the function whose execution context is at the top of the stack. When this function completes, its execution stack is popped off from the stack, and the control reaches to the context below it in the current stack.

 

 

https://javascript.plainenglish.io/node-call-stack-explained-fd9df1c49d2e

Node: Call Stack Explained

https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0

Understanding Execution Context and Execution Stack in Javascript

https://www.geeksforgeeks.org/javascript-code-execution/

JavaScript Code Execution - GeeksforGeeks