JavaScript ~ Execution Context aka Scope - rohit120582sharma/Documentation GitHub Wiki

Whenever any code is run (always by invoking a function) in JavaScript, it is run inside an execution context. In other words, whenever a function is invoked, a new execution context is created.

Every execution context has its own Scope defined by this, lexical environment, and variable environment.

When an execution context is created, its lexical environment and variable environment components initially have the same value.

An execution context is created in two phases:

• Creation phase:
  • JavaScript engine sets up a specific environment before executing the code line by line.
  • All function arguments and variables are declared with equal to undefined value.
  • All functions are declared with the whole definition.
  • Process of declaring variables and functions before executing the code line by line is called Variable Hoisting.
  • A reference to an outer lexical environment is created. In other words, the scope chain is created which is used to resolve variables.
  • Setting of the value of context (this)
• Execution phase
  • JavaScript engine executes/runs the code line by line.
  • Values are assigned to function arguments and variables in the specific environment.

A lexical environment exists in programming languages in which where you write something or where something sits physically in the code is important.

The lexical scope of a function is statically defined by the function’s physical placement within the written source code.

A Lexical Environment is used to resolve identifiers and it consists of three parts:

• Environment-Record: an object that has all local variables (like function arguments, variables, and functions etc.) as its properties. It is also called variable environment.
• this property which refers to an object.
• A reference to the outer lexical environment. The environment’s outer environment is the function’s scope. The outer lexical environment reference will be null only at the topmost level.

A Variable Environment is just the part of a Lexical Environment within the execution context. It is used to declare all variables, functions, and arguments defined inside that function.

• Active execution contexts logically form a Execution stack.
• Every time a function is invoked, a new execution context is created for that function and put on top of the Execution stack.
• The browser always executes the execution context that is atop the execution stack, so the top execution context on this stack becomes the running execution context.
• When the function finishes, it is removed from the top of the stack and control will return to the execution context below.
• When JavaScript interpreter starts to execute/run a program, it first creates a Global Execution Context to execute the code not written inside a function. It is also called Base Execution Context which is created before any ECMAScript code is executed.

Scope means, where can I access a variable and chain is links of outer environment references. The outer reference is the execution context in which the function was created.

The scope chain of an execution context is the internal chain of Lexical Environments that is traversed during identifier resolution.

Nested scopes are handled by chaining environments: each environment points to its outer environment (whose scope surrounds its scope). In order to enable lexical scoping, functions remember the scope (environment) they were defined in.

The scope chain is created when the function is invoked after creating the execution context of that function. It is read-only and exposed as [[Scope]] by browser.

Each time a function is invoked, a new execution context is created which gets the this property—a variable with the value of the object that invokes the function where this is used.

The this keyword gets automatically defined in the scope of every function and it’s binding happens in three ways — default, implicit and explicit.

The this keyword used on the global object or within a free function is bound to the window object at call time. Note that in strict mode, this holds the value of undefined in global functions and anonymous functions that are not bound to any object.

The this keyword used inside a constructor is bound to the object created in the background by JS when you use the new keyword to instantiate an object.

The this keyword within methods is bound to what is to the left of the call time dot upon invocation of the method.

The this property is most misunderstood when used in a borrowing method, a callback function, closure-an inner function, and a method that is assigned to a variable. By setting this value explicitly, these problems can be solved.

The "call", "apply", and "bind" methods are function's methods for setting the this value explicitly. Use bind() when you want that function to later be called with a certain context, useful in events. It returns a new function. Use call() or apply() when you want to invoke the function immediately, and modify the context.