Self-Taught Developer Journal, Day 31: JavaScript Call Stack and Execution Context

Today I learned...

Execution Context

When a JavaScript executes a script or function, an execution context is created. An execution context has two phases: the creation phase and execution phase.

Every script always starts with creating the global execution context. Then, for every function call, a new function execution context is created and put on top of the call stack or execution stack.

let x = 10;

function timesTen(a){
  return a * 10;
}

let y = timesTen(x);

console.log(y); // 100

Source: https://www.javascripttutorial.net/javascript-execution-context/

In the creation phase:

• global execution context is created
• global object is created
• this object binding which references the global object is created
• a memory heap is set up
• variables and function declarations are stored in the memory heap with variables initial value set to undefined

Next, in the execution phase:

• the JavaScript Engine executes the code line by line.
• values are assigned to variables and function calls are executed
• for every function call, a new Function Execution Context is created
• for the Function Execution Context creation stage, instead of creating the global object, it created the arguments object that contains a reference to all of the parameters passed into the function.
• this value is set to the global object
• "a" parameter is initialized with undefined
• Lastly, during the Function Execution Context execution phase, values are assigned and the function returns the result to the global execution context

The Call Stack

The call stack works based on the LIFO principle, last-in-first-out. The functions are added to the call stack as the execution contexts are created.

The call stack has a fixed size (depending on the host environment). If the number of the execution contexts exceeds the size of the stack, a stack overflow will occur.

Resources

https://www.udemy.com/course/the-complete-javascript-course
https://www.javascripttutorial.net/javascript-execution-context/
https://www.javascripttutorial.net/javascript-call-stack/
https://amnsingh.medium.com/lexical-environment-the-hidden-part-to-understand-closures-71d60efac0e0