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?

Cella

What are your answers (or even guesses)? This looks like a quiz question. – Deserted

This question is straight from my brain. Does it looking like a quiz question de-value it? – Cella

Well without more context, it reads like something that would be on a homework assignment, but fair enough; if you say it isn't, it isn't. :) – Deserted

I'm 33. I haven't done homework for a long time. – Cella

Thanks for the unexplained downvote?! – Cella

I didn't downvote; I'll upvote because it's a good question (good enough to be on a quiz!) – Deserted

possible duplicate of Why is an execution context not created here? – Sprocket

@torazaburo - this is not a duplicate of that question. They are two different questions. – Cella

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.

Deserted

I believe there's a global execution context as well. One that's entered when the javascript file is being evaluated. Afterall, there has to be some execution context within which to evaluate the definition of Foo. – Bobbysoxer

@Bobbysoxer yes that's true; personally I think of that as essentially a special case; it's like a function call in a lot of important ways, but it's not exactly the same. – Deserted

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.

Tribulation

OK so the following would create two execution contexts: function Foo () { this.bar = (function () {}()) }; new Foo();. Would deleteing property bar remove the corresponding execution context? – Cella

creating a function does not cause it to "stay in the stack". – Storey

@JasonS That's my mistake while typing and corrected now. – Tribulation

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

Liaoning

Answer 4

My best guess is that it might depend on the environment you are running your code.

Although it is not very hard to check V8 doesn't create executional context for function that is not executed at all.

Nowak