In JavaScript, a function can call another function which in turn can call another function and so on. In a script that has multiple functions like this, the JavaScript interpreter (that runs in the web browser) can keep track of its place inside the script through a mechanism called execution stack.
\nWe will understand this concept of execution stack by analyzing the sequence of code execution of the following script.
\nconst name = "hemanta"\nconsole.log(name)\n\nfunction greetEnglish() {\n const name = "Joe"\n greetFrench()\n console.log(`Good morning ${name}`)\n}\n\nfunction greetFrench() {\n const name = "Keith"\n console.log(`Bonjour ${name}`)\n}\n\ngreetEnglish()\n\nconst prof = "developer"\n\nconsole.log(prof)The code above is nothing special. The only thing to note here is that on line 6, we have called/invoked greetFrench function inside the greetEnglish function.
Before we can understand the concept of execution stack, we need to understand the concept of execution context, which is an environment where JavaScript code gets evaluated and executed.
\nWhen a HTML page loads in the web browser, the JavaScript engine prepares an environment for executing JS code. As part of this environment, global execution context is created. And global execution context in turn creates a global window object (which exists in the global scope) and a special keyword called this, which points to the global window object.
Note that all this happens before execution of any JavaScript code.
\nNow, let's understand step-by-step how our script above gets executed by JavaScript.
\nWe know that when a page gets loaded in the web browser, JavaScript engine creates the global execution context, which manages a script from start to finish and is the first member of the execution stack.
\nGlobal execution context creates memory space for variables and functions. All variables are assigned a default value of undefined and all functions are put into memory in their entirety (i.e. their name + their execution code).
Then, the syntax parser of the JavaScript engine checks the code line-by-line and if no syntax error is found, Javascript starts execution of the code.
\nJavaScript code that is not inside any function runs in the global execution context. After execution of code on lines 1 & 2, the result hemanta is logged in the console.