JavaScript Context and Execution Context Explained

In JavaScript, Context and Execution Context are important concepts, especially when dealing with the behavior of functions, objects, and the this keyword.

1. Context

• Context generally refers to the value of this within a function or block of code.
• It determines which object is bound to this when code is executed.
• Context is often set by how a function is called, for instance:

• If a function is called as a method of an object, this will refer to that object.
• If a function is called on its own (in non-strict mode), this will refer to the global object (like window in a browser).
• In strict mode, calling a function on its own sets this to undefined.
• Arrow functions inherit this from their lexical scope (the context in which they were defined), so this is fixed and not affected by how they are called.

Note: More appropriately, the environment that determines the value of this is called the context. The context is the situation or environment in which a piece of code is executed, influencing what this points to. This environment is what gives this its specific meaning, rather than this itself being the context.

Why this is more accurate:

1. Context as an Environment: Context includes the surrounding environment (such as whether a function is called as a method of an object or in the global scope), which plays a role in determining what this will refer to.
2. Value of this Depends on Context: The value of this changes depending on how and where the function is called. Thus, context refers more broadly to the conditions of the function's execution rather than directly to the this keyword alone.

Let's see following example:

const user = {
  name: "Alice",
  greet() {
    console.log(`Hello, ${this.name}`);
  },
};

const greetGlobal = user.greet;

user.greet();      // "Hello, Alice" - `this` refers to `user` (object context)
greetGlobal();     // "Hello, undefined" or error in strict mode - `this` is the global object (global context)

In this example:

• The context of the function call user.greet() is the user object, so this points to user.
• The context of greetGlobal() is the global environment, so this points to the global object (or undefined in strict mode).

Summary

Defining context as "the environment that determines the value of this" accurately captures how this is influenced by the context in which the function is executed, making it clearer for understanding JavaScript’s behavior.

2. Execution Context

The Execution Context is a broader concept that encompasses everything necessary to execute a piece of JavaScript code. Each time code is run, JavaScript creates an execution context, which has three main components:

1. Variable Environment: Stores variables and functions declarations.
2. Lexical Environment: Holds the environment in which code is executed, including any parent contexts, which allows JavaScript to handle scope and closures.
3. this Binding: This is the value of this within the execution context, determined by how the function is called.

Types of Execution Contexts

There are three primary types of execution contexts in JavaScript:

1. Global Execution Context: Created by default when the script starts. It includes global variables, functions, and the global object (window in browsers).
2. Function Execution Context: Created every time a function is called. Each function call gets its own execution context, with its own variable and lexical environments.
3. Eval Execution Context: Created when eval is used (though eval is generally avoided due to security and performance concerns).

Example:

function sayName() {
  console.log(this.name); // Context determines the value of `this`
}

const person = {
  name: "Alice",
  sayName: sayName,
};

sayName(); // In global context, `this` is the global object (undefined in strict mode)
person.sayName(); // In person object context, `this` refers to `person`, so it logs "Alice"

In this example:

• The Global Execution Context is set up when the script starts running.
• When sayName is called globally, this refers to the global context.
• When sayName is called as person.sayName(), the context is person, so this refers to the person object.

Summary

• Context: Primarily refers to the value of this within a function, defined by how the function is called.
• Execution Context: The overall environment in which code is evaluated and executed, including the this binding, variables, and lexical scope.