{"@id":"cedric-dumont.com"}

A developer's braindump

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](https://en.wikipedia.org/wiki/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](https://code.google.com/p/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](https://github.com/getify/You-Dont-Know-JS).

[1][ecmascript 5.1](http://www.ecma-international.org/ecma-262/5.1/)[2][interpreted language definition](https://en.wikipedia.org/wiki/Interpreted_language) [3] V8 engine wikipedia [4][rhino](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/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)

Next: /2015/11/11/rimraf-to-the-rescue/
Prev: /2015/09/12/certifications-cheat-sheet-page/