Function Execution Context

Each time you call a function, JavaScript creates a brand-new execution context just for that call. This is the Function Execution Context (FEC).

Definition

A Function Execution Context is the execution context created every time a function is called. It holds that function's parameters, local variables, and inner functions, and it is removed when the function returns.

Analogy: if the global execution context is the building, each function call is a room that opens inside it. The room has its own storage and its own work going on, and it closes when the work is done.

Created in Two Phases

Like the global context, a function context is built in two steps.

Phase 1: Creation (memory creation).

1. Stores the parameters with the values passed in.
2. Creates the arguments object (not for arrow functions).
3. Sets this, based on how the function was called.
4. Allocates memory for local var variables (undefined) and inner functions (full code).

Phase 2: Execution. Runs the function body line by line and assigns real values.

var n = 2;

function square(num) {
  var result = num * num;
  return result;
}

var square2 = square(n);

When square(n) is called, a new context is created. After its creation phase:

During its execution phase:

1. var result = num * num; replaces undefined with 4.
2. return result; sends 4 back to the calling context (the global one).
3. The function context is destroyed, and square2 becomes 4.

A New Context for Every Call

Each call gets its own separate memory, so calls never mix up their values.

function greet(name) {
  var message = "Hi " + name;
  return message;
}

greet("Asha"); // context 1: name = "Asha"
greet("Ravi"); // context 2: name = "Ravi" (a completely new one)

The Function Context and the Call Stack

1While square(n) runs:
2 
3| square() context |   <- pushed on top (running now)
4| Global context   |   <- bottom
5 
6After square(n) returns:
7 
8| Global context   |   <- square() context popped off

If a function calls another function, a new context is pushed on top of it, and the stack grows.

Summary

• A Function Execution Context is created every time a function is called.
• It holds parameters, the arguments object, local variables, inner functions, and this.
• It is built in two phases: creation (memory allocation) and execution (line by line).
• Each call gets its own context, with its own separate memory.
• It is pushed onto the call stack when called and popped off when it returns.

Interview Answer: What Is a Function Execution Context?

A Function Execution Context is the execution context JavaScript creates every time a function is called. It has its own memory, which holds the function's parameters, the arguments object, local variables, and inner functions, and its own thread of execution.

It is created in two phases: in the creation phase, parameters get their values, local var variables are set to undefined, and inner functions are stored whole. In the execution phase, the body runs line by line. The context is pushed onto the call stack when the function is called and popped off when it returns, sending the return value back to the calling context.

The next topic is the call stack, which tracks all these contexts.