Execution contexts in JavaScript

Question

A new execution context is created for each function in JavaScript.

How many execution contexts are present in memory when the following code is run? Note that function Bar is not invoked.

function Foo () {

  function Bar() {}

}

Foo();

Also, when are the execution contexts created? At evaluation time or runtime?

Answer 1

The runtime invocation of a function is what causes an execution context to be created. In your example, therefore, there's only one function call, so only one execution context is involved.

The static (compile-time) arrangement of functions is important, because that determines scope and the eventual contents of execution contexts. It's the actual call to a function that matters, however, for the creation of a context. (Some older languages used the term "activation record", though that may have been more intended for stack-based allocations.)

You can read details in the sometimes turgid language of the spec, though it can be hard to make out the forest for the trees. The spec is written in terms of control being transferred. A function call is a very common way that that happens, but so is the invocation of an event handler, or the invocation of a complete <script> block when it is initially loaded by a browser.

Answer 2

When you create a function they are compiled at run time. The function is invoked when you call them.

Let me explain a little bit:

You can have any number of function contexts, and each function call creates a new context.

//Global Context
var helloWorld = "hello world!";
function foo(){//execution context
  function bar(){//execution context
   console.log('bar');
  }
}
foo();

So, in the above code function foo is being called, and creates the new context for function foo and the execution context for bar is only created after you call it but it is compiled already during the run time.

When a script is loaded first time by the browser, it enters the global execution context by default. If you call a function in global scope, the sequence flow of your program enters the function being called, creating a new execution context and pushing that context to the top of the execution stack.

Now let's have a detail about execution context:

So, everytime a function is called, a new execution context is created. Every call to an execution context has 2 stages:

1. creation stage:

When the function is called but before it executes any code inside are: create the scope chain, create variables, functions and arguments, and determine the value of "this".

2. activation stage:

Assign values, references to functions and executes the code.

---

Now, let's have a bit more knowledge of execution context:

function foo (a, b, c) {
    function z(){alert(‘Z!’);}
    var d = 3;
}
foo(‘foo’,’bar’);

ExecutionContext in the foo() call: Step 1: arguments is created

ExecutionContext: {
    arguments: {
        0: ‘foo’, 1: ‘bar’,
        length: 2, callee: function() //Points to foo function
    }
}

Step 3a: variable instantiation, arguments

ExecutionContext: {
    arguments: {
        0: ‘foo’, 1: ‘bar’,
        length: 2, callee: function() //Points to foo function
    },
    a: ‘foo’, b: ‘bar’, c: undefined
}

Step 3b: variable instantiation, functions

ExecutionContext: {
    arguments: {
        0: ‘foo’, 1: ‘bar’,
        length: 2, callee: function() //Points to foo function 
    },
    a: ‘foo’, b: ‘bar’, c: undefined,
    z: function() //Created z() function
}

Step 3c: variable instantiation, variables

ExecutionContext: {
    arguments: {
        0: ‘foo’, 1: ‘bar’,
        length: 2, callee: function() //Points to foo function
    },
    a: ‘foo’, b: ‘bar’, c: undefined,
    z: function(), //Created z() function,
    d: undefined
}

Step 4: set this value

ExecutionContext: {
    arguments: {
        0: ‘foo’, 1: ‘bar’,
        length: 2,  callee: function() //Points to foo function
    },
    a: ‘foo’, b: ‘bar’, c: undefined,
    z: function(), //Created z() function,
    d: undefined,
    this: window
}

After the creation of ExecutionContext, the function starts running its code from the first line until it finds a return or the function ends. Every time this code tries to access a variable, it is read from the ExecutionContext object.

Answer 3

On calling Foo();

• A single execution context is created due to the invocation of a single function
• A pointer to the function Bar is also created, in the process.

Also, there is this default envionment where your code is executed for the first time, called Global Context