Yes, Javascript (JS) is an interpreted language, still has its own form of a compiler, run in what’s known as the Javascript engine. Show Every web browser has its own form of a JavaScript engine Eg. Chrome has v8 and Mozilla has spider monkey etc, though they all have the same purpose. JavaScript engines simply convert JavaScript source code into a language the compiler can understand, then executes it. Let’s start then, Execution ContextAn environment in which the javascript code runs is what form an execution context. The execution context decides what particular piece of code has access to variables, functions, objects, etc. If you have read the scope article then you should know what’s the global scope and local scope(function scope). So similarly execution context have different types — 1. Global Execution ContextWhenever the code runs for the first time or when the code is not inside any function then it gets into the global execution context. There is only one global execution context throughout the execution of code. In the case of browser global execution context does 2 things
2. Function Execution ContextWhenever the code execution found a function it creates a new function execution contexts. There can be any number of function execution contexts. Above, Global execution context contains ‘name’ variable and a function reference to ‘func1’. Whereas three function execution context containing variables and function reference will be created. The Details is explained further in the article. Execution Stack / Call StackJavascript can only run one thing at one time in the browser that means it is the single thread so it queues the other action, events, function in what is called as the execution stack. Whenever a script load in the browser, the first element in the stack is the global execution context. However, when a function executes, an execution context is created and virtually placed on top of the global execution context. Once a function has finished executing, it gets popped off of the execution stack and returning control to the context below it. Let’s take an example and visualize the above. Execution Context Phases There are mainly two phases of the execution context.
Let’s take a look one by one Creation phaseThere are several things that happen here before the function execution happen.
2. After scanning the scope chain an environment record is created where the creation and reference for global context(would be a window in a web browser), variable, function, and function arguments are done in memory. 3. At last value of ‘this’ keyword is determined (In the case of the global execution context, ‘this’ refers to the window) inside each execution context created in the 1st step.
Therefore we can represent the creation phase as creationPhase = { Execution PhaseThis is the phase where the code starts to run in the execution context formed in the creation phase and variable values are assigned line by line. As the execution start, the engine looks for reference to execute the function in its creation phase object. If it doesn’t find it in its own, it will continue to move up the scope chain until it reaches the global environment. If no references are found in the global environment it will return an error. However, if a reference is found and the function is executed correctly, the execution context of this particular function will be popped off the stack and the engine will move onto the next function, where their execution context will be added to the stack and executed, and so on. Let's look at the above two phases via example to get a better idea around it. So the global execution context will look something like this during the creation phase: globalExecutionObj = {
This is the reason why you can access This is, what we call hoisting i.e all variable declarations using globalExecutionObj = { 3 are hoisted/lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made.During the execution phase, the variable assignments are done. So the global execution context will look something like this during the execution phase. globalExectutionObj = { Note: During the execution phase, if the JavaScript engine couldn’t find the value of Now, when ‘func1’ is reached a new function execution context will be formed, whose creation object look like below func1ExecutionObj = { During the execution phase, func1ExecutionObj = { After the function completes its execution, the global environment is updated. Then the global code completes and the program finishes. Please consider entering your email here if you’d like to be added to my email list and follow me on medium to read more article on javascript and on github to see my crazy code. If anything is not clear or you want to point out something, please comment down below. What is function execution context?Functional execution context (FEC): Functional execution context is defined as the context created by the JS engine whenever it finds any function call. Each function has its own execution context. It can be more than one.
What is the difference between execution context and scope in JavaScript?Context is related to objects. It refers to the object to which a function belongs. When you use the JavaScript “this” keyword, it refers to the object to which function belongs. Scope refers to the visibility of variables, and content refers to the object to which a function belongs.
What are contexts in JavaScript?In JavaScript, “context” refers to an object. Within an object, the keyword “this” refers to that object (i.e. “self”), and provides an interface to the properties and methods that are members of that object. When a function is executed, the keyword “this” refers to the object that the function is executed in.
What are the two components of a JS execution context?Each execution context has two phases: the creation phase and the execution phase.
|