Javascript | execution context & Lexical Environment

In JavaScript, an execution context is the environment in which a piece of code is executed. It consists of three main components: the Variable Environment, the Lexical Environment, and the This Binding. Understanding how these components work together is key to understanding how JavaScript code is executed.

Variable Environment The Variable Environment is where the variables and functions defined in a piece of code are stored. When a function is executed, a new Variable Environment is created for that function, which contains all the variables and functions defined within that function.

Let’s take a look at an example:

function multiply(a, b) {
  var result = a * b;
  return result;
}

var product = multiply(2, 3);
console.log(product);

In this example, when the multiply function is executed, a new Variable Environment is created for that function. Within that Variable Environment, the a and b parameters, as well as the result variable, are defined.

Lexical Environment

The Lexical Environment is similar to the Variable Environment, but it also includes information about the lexical scope in which a piece of code is executed. This is important because it determines which variables and functions are accessible from within a given context.

Let’s look at an example:

var x = 1;

function outer() {
  var y = 2;

  function inner() {
    var z = 3;
    console.log(x + y + z);
  }

  inner();
}

outer();

In this example, the inner function is defined within the outer function, which is in turn defined in the global scope. When the inner function is executed, a new Lexical Environment is created for that function. This Lexical Environment contains information about the lexical scope, including the variables x, y, and z. The x variable is accessible because it is defined in the global scope, while the y variable is accessible because it is defined in the same scope as inner. The z variable is accessible because it is defined within inner itself.

This example demonstrates how Lexical Environments are nested within each other, with each new function creating a new environment that contains information about the variables and functions defined within its own lexical scope as well as the lexical scopes of any outer functions.

This Binding

The This Binding refers to the value of the this keyword within a given context. It is determined at runtime and depends on how a function is called.

Consider the following example:

var person = {
  name: "John",
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.sayHello();

In this example, the sayHello function is defined within an object person. When person.sayHello() is called, the this keyword within the function refers to the person object, and the output is "Hello, my name is John".

Understanding execution contexts is key to understanding how JavaScript code is executed. By understanding the Variable Environment, Lexical Environment, and This Binding, you can gain a deeper understanding of how scope and context work in JavaScript.