Compilation and Execution phases of simple Javascript code

Some thoughts on : “Is javascript a compiled language” and disclaimer

If you search wikipedia for the definition of interpreted language (which is what javascript is usually referred to), you’ll come across this definition:

> An interpreted language is a programming language for which most of its implementations execute instructions directly, without previously compiling a program into machine-language instructions. The interpreter executes the program directly, translating each statement into a sequence of one or more subroutines already compiled into machine code

when you write javascript code, you don’t hit *(CRTL+SHIFT+B)* like you would for c#, you just open your browser, target an index.html file with a ref to your whatever.js files and then it gets loaded and “interpreted” right? … or not ?

If you go to the ECMAScript 5.1 specs [1] it states this :

> A web browser provides an ECMAScript host environment for client-side computation including, for instance, objects that represent windows, menus, pop-ups, dialog boxes, text areas, anchors, frames, history, cookies, and input/output.

so the scripting language (web scripting language) allows us to interact with this host environment. so in a sense it is not compiled, but only allow us to interact with some compiled elements, objects….

but wait … when the file is loaded in a browser like Chrome for instance, it seems it is processed some how. and after some googling, the responsible for this is V8. what does V8 do …. you guess it :

> V8 compiles JavaScript to native machine code (IA-32, x86-64, ARM, PowerPC, IBM s390 or MIPS ISAs)before executing it [3]

(it seems Rhino [4] does the same for Mozilla browsers : it compiles javascript code to java Bytecode)

So javascript **compiles** to machine code in a certain way at the end …

**Disclaimer** : I am not a javscript expert, so take this content with caution and if you want to deep dive into javascript, I would recommend you to read Kyle Simpson’s books.


[1] ECMAScript 5.1
[2] interpreted language definition
[3] V8 engine wikipedia
[4] Rhino


Example code

var foo = "bar";

function bar() {
    var foo = "baz";

    function baz(foo) {
        foo = "bam";
        bam = "yay";
    }
    baz(); 
}

bar();
console.log(foo);
console.log(bam);
baz();

Compilation (link) phase

for this compilation phase let's stick to Kyle Simpson's explanation of this phase. This helped me understand a lot about some (common) mistakes and avoid them … let’s start with a “simple” example and apply it’s simple rules.

In the Global scope
Hey global scope, I have a declaration for variable foo.. so the global scope will register it.
Hey global scope, I have a bar() function declaration.. it will be registered in the global scope
now we enter the scope of bar:
Hey scope of bar, I have a declaration for variable foo … so the scope of bar will register it.
Hey scope of bar, I have a baz() function declaration … so the scope of bar will register it
now we enter the scope of baz
Hey scope of baz, I have a declaration for identifier called foo … so the scope of baz will register it.

This ends the compilation phase:

Scope     declaration     value
------    -----------     -----
global    foo             variable
global    bar             function

bar       foo             variable
bar       baz             function

baz       foo             variable

execution phase :

(note fro the reminder : LHS = Left Hand Side and RHS = Right Hand Side)

line 1 : Hey global scope, I have an LHS reference for variable called foo, do you have it ?
=> the global scope has it and give it to perform the assignment.

line 2 to 12 : nothing to execute for now

line 13 : Hey global scope, I have an RHS for variable called bar, do you have it ?
=> yes, and the global scope will return it to the caller. in fact this is a function and giving it the parenthesis, we will execute it.

line 4 : Hey scope of bar, I have an LHS reference for variable called foo, do you have it ?
=> yes and it is returned for assignment.
var foo of local baz scope is shadowing the var foo of global scope

line 6-9: is a declaration

line 10 : Hey scope of bar, I have an RHS reference for variable called baz, do you have it ?
=> yes, here it is, and execution is done through parenthesis. fortunatly, baz is also a function that we can execute

line 7 : Hey scope of baz, I have an LHS reference for variable called foo, do you have it ?
=> yes and it is returned for assignment.

line 8 :
Hey scope of baz, I have an LHS reference for variable called bam, do you have it ?
=> no. => so one level up
Hey scope of bar, I have an LHS reference for variable called bam, do you have it ?
=> no. => so one level up
Hey global scope , I have an LHS reference for variable called bam, do you have it ?
=> no, but I create one for you, here it is, you can make your assignment.

line 14 : Hey global scope, I have an RHS reference for variable called foo, do you have it ?
=> the global scope has it and give it back. => it’s vlue is ‘bar’ (because here we are talking about the variable foo of the global scope, not the one of the bar or baz scope.

line 15 : Hey global scope, I have an RHS reference for variable called bam, do you have it ?
=> the global scope has it and give it back. => it’s vlue is ‘yay’

line 16 : Hey global scope, I have an RHS reference for variable called baz, do you have it ?
=> no => for RHS, it’s not going to create one for me, like it would if it had been a LHS
=> reference error, because there is no Identifier baz (this is true for strict and non strict mode)

2 thoughts on “Compilation and Execution phases of simple Javascript code”

  1. var foo = “bar”;

    function bar() {
    var foo = “baz”;

    function baz(foo) {
    foo = “bam”;
    bam = “yay”;
    }
    baz();
    }

    now we enter the scope of baz
    – Hey scope of baz, I have a declaration for identifier called foo … so the scope of baz will register it.

    -Why it is not registering ban in scope of baz.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s