Exploring JavaScript Execution: From Memory Allocation to Function Calls
Welcome to the journey of exploring JavaScript execution, where every line of code tells a story of memory allocation, function calls, and the dynamic interplay of data and operations. Throughout this journey, we'll delve into the inner mechanics of JavaScript's runtime environment, shedding light on the fundamental concepts that underpin its behavior. So, fasten your seatbelts as we dig deeper into JavaScript execution, uncovering the secrets that lie beneath the surface. Are you ready? Let's begin!
Whenever we run a code file, first of all a context is created for a global execution, and a global object is also created in the same context. In the browser environment, the global object is usually referred to as the window, while in Node environment, it is referred to as the global object. In the global scope, this (which is a keyword) refers to the global object.
The code is then executed in two phases, the first phase being the memory creation phase and the second being the execution phase.
Memory Creation Phase
Memory Creation Phase its also called Creation Phase, during this phase memory got allocated for all variables and function, Variables declared with let and const are kept in a temporal dead zone until they are assigned a value during execution phase. If we try to use these variables before assigning them a value, we will encounter a "Reference Error". Once they are assigned a value, they are removed from the temporal dead zone. However, variables declared with var are automatically assigned the value 'undefined'. This means that if we try to use the value of a var variable before it is explicitly assigned, instead of encountering a "Reference Error", we will get 'undefined'.
The memory allocation during the creation phase ensures that the function's code and variables are available for execution when the function is called.
Execution Phase
In the execution phase, code is executed line by line, assigning values to variables as they appear in the code. When a function is called, a new execution context is created, containing a new variable environment. Now, there will be a memory creation phase and execution phase for that function in the new execution context. All the variables inside the function, including the parameters, will have memory allocated for them in the creation phase. Then, in the execution phase, the function performs its intended task. After the function completes its task, execution returns to the parent where the function was called, and the created variable environment is deleted.
Analyzing the and Creation and Execution Phases
let num1 = 15
let num2 = 10
function sum(val1, val2){
let result = val1 + val2
return result
}
let result = sum(num1, num2)
Let's observe how these phases unfold in the example code. Following the creation of Global execution context and global object, memory creation phase will proceed.
Memory Creation Phase :
initially num1 and num2 get the memory allocated for them, as they are declare with
letthey will be put in the temporal dead zone till the value get assign to them in the execution phase.sum function get memory allocated
variable
resultget memory allocated and will be put in thetemporal dead zonetill during the execution phase sum function is called and return the value.
Execution Phase :
num1 & num2 : num1 and num2 will get value 15 and 10 assigned to them respectively and they will get remove from the temporal dead zone.
function sum(){.....} : This line is a function declaration not a function call so, this will get ignore.
let result = sum(num1, num2) : Here, sum function will get call,
new execution contextwill get created for the sum function, then the sum function go through creation phase and execution phase. After the function done its task it will return the result which will get sent back to the parent context in this case the global execution context and the value get store to the result variable, then the new environment variable created for the sum function gets deleted, and the program ends.
This concludes our journey of exploring JavaScript execution, aimed at providing insight into the inner mechanics of the JavaScript runtime environment. We've observed how variables are allocated memory and assigned values, and gained understanding of how functions undergo the execution phase. May this newfound knowledge serve as your guiding light through the dynamic landscape of JavaScript execution. Happy coding!