Execution Context - The fellowship begins

In one of the earlier post I talked about the type of variables in Javascript. Its time to build over that introduction and enlighten our self with the knowledge & power ( don't forget quirks) of the variables(types) in Javascript. Lets get started.

Obi Wan: Anakin what have you learned so for about variables in Javascript.

Anakin: Master  we know that variables in Javascript can have primitive or reference values. Primitive values are simple values Boolean, string, null, undefined, Numeric. When we work with primitive values we work with the actual value stored in the variable.Reference values are object that are made up of multiple values, they are essentially objects stored in memory.

Obi Wan: Good tell me more about the Reference values.

Anakin:Yes Master when we manipulate the object we are actually working on a reference of the object rather than the object itself.

To give you the crux of above discussion, in Javascript we have variables and these variables can have either a primitive value or a reference value. 

var a = "myname" // variable with primitive value
var b = new object(); // variable with reference value

One important point to remember is that we can add properties to reference variables (acting objects), however its not possible in primitive variables.

Thus continuing above example, this is perfectly valid:

b.name="Ninja"
console.log(b.name); //Ninja

However if we try to add a dynamic property to a variables with primitive value nothing will happen - really nothing happens.
var a = 5;
a.IsPrime = false
console.log(a.IsPrime); // undefined.

when a variable with primitive type is copied a new variable with same value, meaning there is no relation among the two variables

However this is different in variables with reference values, here the reference pointing to the value is  copied thus both the copies will point to the same object. Thus if any modification to the value will be reflected for both pointers.

Similarly when a variable with primitive value is passed as an argument to a function its actually the copy of outer variable which gets passed as the argument thus any modification made to the value in the function is local and does not effects the outer variables value.

Again for the variables with reference values the copy of the pointer is passed as the argument, thus any modifications made to the value inside the function will get reflected.

var val = new Object();
val.name="foo";
console.log(val.name); //foo
val = Param(val);
console.log(val.name); //foo++

function Param(value){
value.name="foo++"
return value;
}

Determining  type

Using typeof operator we can determine if a variable is of primitive type.

For null the typeof operator returns object

var n = null;

typeof  n; //object

for reference values typeof doesnt works it basically returns object for all reference variables. Thus for reference variables we use instanceof 

May the Scope be with you - Mystic Execution Context

In Javascript the concept of execution context is bit different than 4G language like C# or Java. Execution context of a function is like a property bag which defines what other data the function has access to, as well as how it should behave. This property bag is called variable object, upon this all of  the variables of the functions exists.

Except from Professional Javascript for Web Developers

Each function/variable has its own execution context thus starting from the browser window object a stack is created with each function call the first element is the window variable. When ever the code execution flows into a function, the execution context of the function is pushed to the stack, when the function execution is finished the execution context is popped out of stack.

Obi Wan: My dear Anakin I hope this clarifies what is Execution context (EC) ?
Anakin: Obi Wan this seems to be a dialect I haven't learned yet.

Obi Wan: You need to clear your minds young Anakin, may the force with you.

Think of EC aka Scope as the environment associated with the executing Javascript code. Given this EC can be either:

1. Global Context - Higher most context in which the code executes by default. window in browser
2. Function Context - Created with execution of each function call.
3. Eval (This is first and last we mention of he who should not be named)

Thus we will always have a single global EC but we can have multiple function EC. Javascript interpreter is single thread (thank God for that) thus it can execute only one action/event at a time which means that the events/action get queued in something called Execution Stack.

Considering that the code execution is call to Function 1 followed by Function 2 &3.

Thus when the Javascript starts executing it encounters the global context and then all followed function calls will be added to the Execution stack (keep this in mind as this would help us in understanding how the identifiers are resolved)

Also if a function calls itself even then a new EC will be created and pushed to stack.

So in preparation of executing a function the EC is created and is augmented with:

1. Create scope chain (will discuss the scope chain later in detail)
2. Create argument
3. Create this 

Once our EC is pumped up with these object (technically incorrect but should convey the idea) then execution of code happens under the environment provided by EC.

Thus to imagine this is how the EC would look like

Thus to summarize Execution Context is bundled of Variable object (in case of functions also known as Activation object), Scope chain and this.

In coming sections I will take up how the fellowship of Variable object (Man), Scope(Elfs) and this (Dwarfs) unite to help Frodo (developers) conquer the Ring (Javascript)  and try to elaborate how they effect :
Hoisting
Identifier resolution
context.

Stay tuned :)