What is Javascript Engine? As a Javascript developer we all know Javascript Engine is the thing which compiles and runs the Javascript code. Whatever code we write is runnable in the browser, so compilation process is the less concentrated part by Developer. I am talking about ES5 code, because you use webpack to bundle, transpile the Es6 code to ES5 but that is not compiling of code. Webpack never generate byte code or binary code. It just convert one version code practice to other version. Point here is, you write a code say,

var even = true;

if(even){ alert("even"); }else{ alert("odd"); } now, copy the code, open console paste and you will see the output as soon as you enter. here are 2 questions in my mind.

o/p:

javascript engine

1. Who has compiled code?

Answer: Javascript Engine

1. When does code got compiled?

Answer: JIT (Just in time) – Runtime compilation.

Let’s Dig into compiler a bit more.

Modern browser uses two compilers

Optimizing Compiler / Recompiling Hot Functions De-Optimizing Compilers Optimizing Compiler:

Functions which are used a lot and have worst speeding time is to be considered as HOT functions. If the functions are used a lot and are worst then there is a need to do something because this scenario is killing the performance of the application.

Before that, basic question is how do you detect the hot functions?

We compile the code, we run it several times. Collect the information about the types. and we get to know Ooooh… this function is hot, using information gathered.

Clear?

Now we have got which function is hot.now here is recompilation takes place which is a task of optimizing compiler.

see below diagram, and you will get some idea how Optimization takes place,

optimizing-compiler optimizing compiler Lets take an example,

function getvalue(obj, key){ return obj[key]; }

var obj = {name:"Akash", age:"24"};

var name = getvalue(obj, "name");

console.log("name is =>", name); cool, this should print name is => Akash and it will but let’s see the scenario form compilers point of view. okay, you need name from object obj. I don’t know whether this key exists in obj or not. whether it is in long prototypical chain of obj or not. And where is it? trust me this is a very very big question/tough to Compiler. Somehow compiler finds the value and it returns to you. but is this function hot?? is this function deserve optimization. Answer is NO? why? Because it have not called many times. Lets do that.

console.log("name is =>", getValue({name:"Akash", age:24}, "name"));

console.log("age is =>",getValue({name:"Suresh", age:24}, "name"));

console.log("age is =>",getValue({name:"Kiran", age:24}, "age"));

console.log("Roll no is =>",getValue({name:"Akash", roll_no:2}, "roll_no"));

console.log("gender is =>",getValue({gender:"male", roll_no:2}, "gender"));

Line 1 : Compiler executes the functions and stores the information about it as, there is one object which has some properties and user wants to extract name from it. then compiler searches if that property exists, if no then go to prototypical chain if yes then go to memory location and return it from there.

Line 2 : Compiler gets another object and it wants name property out of it. Compiler first check a type of object. If it is similar of any previous one then compiler knows where to search for it and now operation is quick.

Line 3: Same type of operation. Compiler says wow. Although you want the different property but type is same and i know where to search it for. Operation again is quick.

Line 4: oops, what? object type is not the identical. I have to see wether the property exists or not. is it in prototypical chain or not. Let me do it from scratch. oooohhh, I am done but i am slow this time.

Line 5: oops, again, similar story as line no 4.

Although same function we are calling but that is not so ideal to optimize it. So it is always advisable to use similar/identical object (if possible) when you are executing the same functions.

How???

console.log("name is =>", getValue({name:"Akash", age:24, gender:null, roll_no:null}, "name"));

console.log("age is =>",getValue({name:"Suresh", age:24,gender:null, roll_no:null}, "name"));

console.log("age is =>",getValue({name:"Kiran", age:24,gender:null, roll_no:null}, "age"));

console.log("Roll no is =>",getValue({name:"Akash", roll_no:2,gender:null, age:null}, "roll_no"));

console.log("gender is =>",getValue({gender:"male", roll_no:2,age:null, name:null}, "gender"));

In above case all objects are identical and compiler will be optimizable and will provide you quick results.

1. De – Optimizing Compiler

If optimized code for some cases wont work we have to go to base code and redo the things called as De-optimization.

In above example at line no 4 we realized our optimized code wont work. thats why we have to go our original code and redo the all things.

Last Statement,

We all know, We have a compiler which will take care of everything we write but its our duty to think of him, what he recommend form us and do coding accordingly. Happy Coding!

Looking for ReactJS Development Services , Hire our dedicated developers!

Let's Cronj assist you!!!